CSS 多行省略号跨浏览器

Question

我的网页中有一个“div”，它具有固定的宽度和高度。

以下 css 仅适用于单行文本：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如何使用具有跨浏览器兼容性的纯 css 对 div 内的文本上的多行文本应用省略号？

Answer 1

试试这个例子：

display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

http://codepen.io/martinwolf/pen/qlFdp

或者去dotdotdot.js

Answer 2

此解决方法将需要一个环绕元素，并且有一点需要注意的是，如果它完全填满了您的内容框，它会覆盖您的文本的最后，但它在流畅的情况下工作得很好，直到一个更好的 css 属性（如 line-clamp）被广泛实施。

最适合text-align:justified，但不是必需的。

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}

.ellipsis{
  overflow:hidden;
  margin-bottom:1em;
  position:relative;
}

.ellipsis:before {
  content: "\02026";  
  position: absolute;
  bottom: 0; 
  right:0;
  width: 3em; 
  height:22px;
  margin-left: -3em;
  padding-right: 5px;
  text-align: right;
  background-size: 100% 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  z-index:2;
}
.ellipsis::after{
  content:"";
  position:relative;
  display:block;
  float:right;
  background:#FFF;
  width:3em;
  height:22px;
  margin-top:-22px;
  z-index:3;
}

/*For testing*/
.ellipsis{
  max-width:500px;
  text-align:justified;
}
.ellipsis-3{
  max-height:66px;
}

.ellipsis-5{
  max-height:110px;
}

<div class="ellipsis ellipsis-3">
  <p>Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>  
</div>

<div class="ellipsis ellipsis-3">
  <p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p>  
</div>


<div class="ellipsis ellipsis-5">
  <p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p>  
</div>

Answer 3

糟糕的 CSS 不支持跨浏览器多行钳制，似乎只有 WebKit 正在推动它。目前任何其他 hacky 解决方案似乎都不值得，因为即使它们也有自己的问题。

我知道你想要纯 CSS 并且可能有你自己的 Javascript 替代选项，但是你可以尝试使用一个简单的 Javascript 省略号库，比如 github 上的 Ellipsity，源代码非常干净而且很小，所以如果你确实需要做任何额外的改变它应该很容易。

https://github.com/Xela101/Ellipsity

我真的也想要一个纯 CSS 解决方案来加快速度，让一切看起来更漂亮，而不需要外部依赖。

Answer 4

var explorer = detectIE();

function detectIE() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }
  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }
  // other browser
  return false;
}
var firefox = navigator.userAgent.indexOf('Firefox') > -1;

if ((explorer) || (firefox)) {

  var fontSize = $(".ellipsis-2").css('font-size');
  var fontSize = parseInt(fontSize, 10);
  var lineHeight = fontSize + 4;
  var height = lineHeight * 2;
  $(".ellipsis-2").css("line-height", lineHeight + "px");
  $(".ellipsis-2").css("height", height);
  $(".ellipsis-2").css({
    "overflow": "hidden",
    "position": "relative",
    "word-break": "break-all"
  });

  var divheight = $(".ellipsis-2").height();
  var lineheight = $(".ellipsis-2").css('line-height').replace("px", "");
  var countline = Math.round(divheight / parseInt(lineheight));
  // if you want to show 2 line 
  if (countline > 2) {
    $(".ellipsis-2").addClass("dotted");
  };

}

.ellipsis-2 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  position: relative;
}

.dotted:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis-2">Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>

Answer 5

你可以使用一些伪类来解决它。由于text-overflow: ellipsis 不呈现相同的跨浏览器，我们使用您可以提供给:after 类的内容属性添加省略号。当我们将white-space: nowrap 设置为p 时，我们需要添加div:after“hack”以确保在填充设置的位置剪切文本。

HTML：

<div>
    <p>This is a text that clips to ellipsis because it is long</p>
    <p>This is a text that clips to ellipsis because it is long</p>
</div>

CSS

div {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}

//Solves the overflow issue of the white-space: nowrap
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: #fff;
z-index: 1;
}

p {
white-space: nowrap;
display: inline-block;
}

p:after {
content: '...';
position: absolute;
right: 5px;
z-index: 2;
}

JSFiddle

编辑

我可以看出我可能误读了您的问题。我的代码将修复跨浏览器省略号渲染，但不适用于多行文本。查看这篇文章以获取有关您特定主题的更多答案：Limit text length to n lines using CSS: Stack Overflow