CSS覆盖text-overflow: ellipsis

Question

CSS覆盖text-overflow: ellipsis

css

3

默认情况下，如果我们使用“text-overflow: ellipsis”，省略号将自动添加到文本中，但我的情况需要通过“两个星号”* *来覆盖此设置。如何在纯CSS中实现这一点？

注意：它应该支持所有浏览器，如IE9+和chrome。

一些人们要求添加示例，可以参考以下链接： http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

- Jayamurugan

为了做到这一点，您需要使用JavaScript。纯CSS无法实现。 - priya_singh

你能否发布你的代码？ - Nenad Vracar

@NenadVracar：添加了示例 - Jayamurugan

这并不完全像CSS的省略号功能那样工作，但它可以给你一个创建类似东西的提示：https://jsfiddle.net/dekelb/vuxfk0hk/ - Dekel

你应该只需指定一个字符串作为 text-overflow，但浏览器支持程度有所不同。在Vivaldi中它不起作用。 - GolezTrol

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Saurav Rastogi · Accepted Answer

你可以使用伪元素，例如:after，来应用一个技巧。

看一下下面的片段：

#div1 {
  position: relative;
  white-space: nowrap; 
  width: 99px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}

#div1:after {
  content: '**';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 2px 0 0;
}

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div1">This is some long text that will not fit in the box</div>

希望这可以帮助你！