我希望在可變寬度的線條后面有一個圖標(復選標記)。 如果這一行變得太長，我希望用省略號將其截斷。 但是勾號應該留在省略號后面

https://jsfiddle.net/Lkvt39re/

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inner::after {
  content: 'X';
}

.outer {
  width: 200px;
}

<div class="outer">
  <div class="inner">
    this is pretty longggggg
  </div>
</div>

嘗試改為在偽元素之前添加一個::元素，然后將其樣式設置為右浮動。這樣，您的偽內容就不會被設置為元素寬度的限制修剪掉。

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.inner::before {
    content: 'X';
    float: right;
}

二者擇一地

您可以將::after偽元素設置為父元素。外層，然后設置嵌套的。顯示內聯塊的內部元素(允許。初始寬度后的外部落差。inner)并聲明了max-width；一旦超過這個最大寬度，溢出規則將適用，給您省略號，但仍然保留。文本溢出后外部可見。

問題是試圖將這個偽元素聲明到一個已經聲明了寬度限制和溢出規則的元素。您需要在元素之外刪除偽元素，在某些時候，偽元素將開始修剪內容。

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inner::before {
    content: 'X';
    float: right;
}

.outer {
  width: 200px;
}

/* Alternative */

.alternative .inner {
    max-width: 80%;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.alternative .inner.no-max-width {
    max-width: none;
}

.alternative .inner::before {
    display: none;
}

.alternative.outer::after {
    content: 'X';
    display: inline-block;
}

<div class="outer">
  <div class="inner">
    this is pretty longggggg
  </div>
</div>
<br>
<p><strong>Alternative</strong></p>
<div class="alternative outer">
  <div class="inner">
    this is pretty longgggggggggggg
  </div>
</div>
  
<div class="alternative outer">  
  <div class="inner no-max-width">
    this is pretty long
  </div>
</div>

德夫曼， 為此，您需要賦予偽元素某種形狀，并將其定義為內聯塊或塊元素。然后，您可以設置適合您的樣式的尺寸。

看看這段編輯:

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  /** give your container some extra space for the pseudo **/ 
  padding-right: 25px;
}

.inner::after {
  content: 'X';
  color:red;
  /** define it as a "block" element and add dimension **/
  display: inline-block;
  height: 1.0rem;
  width: 1.0rem;

}

.outer {
  width: 180px;
}

http://codepen.io/jonrandahl/pen/rLMKwR

您可以使用flexbox而不是偽元素來實現這一點。請參見更新的示例，也可參見關于這一點的css-tricks文章:

.inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keep {
  flex-shrink: 0;
}

.outer {
  display: flex;
  gap: 0.25rem;
  width: 150px;
}

<div class="outer">
  <span class="inner">
    this is pretty longggggg
  </span>
  <span class="keep">X</span>
</div>