文本溢出上的样式点：省略号答案

【问题标题】：Styling dots on text-overflow: ellipsis文本溢出上的样式点：省略号
【发布时间】：2019-06-27 02:29:23
【问题描述】：

是否可以为text-overflow: ellipsis 上的点设置样式？

例如将省略号加粗，例如“Lorem Ips ...”

【问题讨论】：

我建议使用::after。

标签： html css

【解决方案1】：

受this answer 的启发，这里是省略号样式的一种方式。该解决方案的缺点是

您必须重新分配默认文本样式
您还需要一个<span>（或其他）元素

.text-overflow
{
  color: blue;
  font-weight: bold;
  font-size: 20px;

  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
}

.text-overflow > span
{
  font-weight: normal;
  color: black;
  font-size: 14px;
}

&lt;div class="text-overflow"&gt;&lt;span&gt;Here is some very nice text indeed. So this is getting long&lt;/span&gt;&lt;/div&gt;

【讨论】：

看起来很酷。我不完全明白这是如何工作的？你能解释一下为什么当这些东西没有省略号时它不显示吗？
@PraveenKumar 这就是text-overflow 的重点。它类似于普通的overflow 属性，但它针对的是比其父元素更宽的文本节点（因此是white-space: nowrap）。您可以选择如何处理溢出的文本，其中一个选项是在开头或结尾显示“...”。 Here is a mdn article 谢谢你的回复 :)
@PraveenKumar 浏览器会自动使用text-overflow: ellipsis; 属性添加...，因此您不需要::after。
@DmitryNarkevich 等等。我知道这个。我在一年前问过这个问题...:P
@PraveenKumar 哎呀哈哈没看到日期

【解决方案2】：

我建议使用:after，但这也可以代替那些没有省略号的人。

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.truncate::after {
  display: block;
  font-weight: bold;
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}

&lt;div class="truncate"&gt;You may be starting to notice a trend from my recent articles here on HTML5 Hub. I’m a JS snob by trade, but by association I have to deal with my fair share of CSS issues. So, as an “outsider” looking in, I’m taking this opportunity to highlight some of the big “pain points” that CSS causes for various basic tasks in web dev. It’s not really intended as a criticism of the technology per se, but more a rallying cry to ask for standard solutions which remove our hacks.&lt;/div&gt;

不是防黑客的方法，而是我的几分钱。

【讨论】：

这种方法的唯一问题是，即使没有被截断，它也会添加“...”
@allejo 是的，你是对的...:(这就是为什么我告诉你不是一种防黑客的方式！

【解决方案3】：

另一种方法是使用带有 span 元素的包装器，如下所示：

.text-overflow {
  font-size: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap;
}

.style-text {
  font-size: 20px;
}

<div class="text-overflow">
  <span class="style-text">
    text that is styled and styled and styled
  </span>
</div>

【讨论】：