隐藏内联元素的溢出

Question

如何实现下面的（纯属CSS）？

在固定宽度的块中：
显示文本，然后是另一个 character/image (✤)。
但是，当文本太长时，隐藏它的溢出，
而后面仍然显示character/image(✤)。

视觉上：

不应该：

将文本换行
增加区块
隐藏 character/image (✤)
始终显示右边的字符

标记（但如果有帮助，请随时建议使用其他标记）：

<div class=outer>
  <span class=copy>Text abc def ghi jkl mno pqr stu</span>
  <span class=symbol>✤</span>
</div>

Answer 1

这是一个使用定位的解决方案 - 你会注意到当文本很短时，符号会留在右端：

div {
  border: 1px solid red;
  padding 10px;
  padding-right: 15px;
  white-space: nowrap;
  overflow:hidden;
  width: 100px;
  text-overflow: ellipsis;
  position: relative;
}

div:after {
  content: '✤';
  position: absolute;
  right:0;
}

<div>well, some text here</div>
<div>text here</div>

这是一个使用 flexbox 的解决方案，我完全可以使用它：

div {
border: 1px solid red;
  padding 10px;
  width: 100px;
  display: flex;
}

div span {
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

div:after {
  content: '✤';
  padding-left: 5px;
}

<div><span>well, some text here</span></div>
<br/>
<div><span>text here</span></div>

Answer 2

考虑到您的块具有固定宽度，我将根据以下内容显示带有 position: absolute; 的额外 character/image：

作为伪元素的额外字符

div {
  position: relative;
  display: inline-block;
  padding: 5px;
  padding-right: 25px;
  border: 2px solid black;
  width: 150px;
}

span {
  position:relative;
  display: inline-block;
  padding-right: 20px;
  max-width: 100%; /* or 120px or whatever you want */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span:after {
  content: '★';
  position: absolute;
  top: -2px;
  right: 0px;
}

<div>
  <span>text text text</span>
</div>

将额外的图标声明为伪元素。

https://jsfiddle.net/6stc9hf0/1/

不同的方法仍在考虑声明的静态宽度

div {
   position: relative;
   display: inline-block;
   padding: 5px;
   padding-right: 25px;
   border: 2px solid black;
   width: 150px;
 }

.text {
  position:relative;
  display: inline-block;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon {
  position: relative;
  top: -2px;
  right: 0px;
}

<div>
  <span class="text">text text text text</span>
  <span class="icon">★</span>
</div>

https://jsfiddle.net/6stc9hf0/2/

隐藏内联元素的溢出

Hide overflow of inline element

html

css

ellipsis