Question

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

一个例子是粗略省略像Lorem Ips ... ＆＃39;

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

<div class="text-overflow"><span>Here is some very nice text indeed. So this is getting long</span></div>

Answer 2

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

＆＃13;

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

＆＃13;

<div class="truncate">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.</div>

＆＃13;

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

Answer 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>

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

3 个答案: