为什么线钳位不工作与文本对齐对齐 [英] Why Line Clamp is not working with text align justify

问题描述

为什么 -webkit-line-clamp 没有使用 text-align：justify 显示正确的省略号。它与 text-align：left / right 的工作正常。

Why -webkit-line-clamp is not showing proper ellipsis with text-align:justify. It's working fine with text-align:left/right.

请提出任何伎俩。

div {
    text-align: justify;
    width:150px;
    padding: 0 5px;
    line-height: 18px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div>Why Line Clamp is not working with text align justify</div>

推荐答案

您尝试使用的解决方案是一种非常古老的技术。它使用旧版本的 display：flex; ，应该避免。

The solution you're trying to use is a very old technique. It uses an old version of display: flex;, and should be avoided.

您可以使用JavaScript技术clamp.js，但我也创建了这个纯CSS版本： http://codepen.io/n3ptun3/pen/meYKgZ?editors=110

You can use the JavaScript technique, clamp.js, but I've also created this pure CSS version: http://codepen.io/n3ptun3/pen/meYKgZ?editors=110

CSS

p {
  position: relative;
  width: 400px;
  height: 120px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: justify;
}

p::after {
  content: "...";
  background-color: #fff;
  height: 30px;
  width: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

当然，这只能在实体背景下工作，但大部分时间将是正文文本的情况。

Of course this only works on a solid background, but most of the time that'll be the case with body text.

以下是要点：

1. 将line-height设置为你喜欢。


2. 将高度设置为行高的倍数。


3. 将溢出设置为隐藏。


4. 将省略号添加到后伪元素，并将其背景颜色设置为段落背景颜色的背景颜色。

1. Set the line-height to whatever you like.
2. Set the height to a multiple of the line-height.
3. Set the overflow to hidden.
4. Add the ellipsis to the after pseudo-element and set its background color to that of the paragraph's background color.

这篇关于为什么线钳位不工作与文本对齐对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！