Question

如何实现以下目标（纯粹在CSS中）？

在固定宽度的块中：
显示文字，以及其后的其他字符/图像（✤）。
但是，当文字太长时，隐藏其溢出，
，而仍然在其后显示字符/图像（✤）。

目视：

不应该：

包装文字
成长块
隐藏角色/图像（✤）
始终显示右侧的字符

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

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

Answer 1

以下是使用定位的解决方案 - 您可以注意到，当文字很短时，符号将保持在右端：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

以下是使用flexbox的解决方案，我完全了解了它：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

由于您的块具有固定宽度，我只需按position: absolute;显示额外的字符/图像：

额外字符为伪元素

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

隐藏内联元素的溢出

2 个答案: