如果文本以 CSS 分隔，则在文本的第 n 行显示点

Question

如果文本中断，我想在文本的第 n 行（在我的例子中是第 2 行）显示点。我看到了 this and this 个答案，但我没能成功。

这是一个fiddle。

.overme {
    width: 300px;
    height: 60px;
    line-height: 30px;
    overflow:hidden; 
    font-size: 30px;
    color: red;
    background: #333;
    /*The problematic part is below*/
    white-space:nowrap; 
    text-overflow: ellipsis;
}

Answer 1

看看这个 post CSS Tricks，它帮助我解决了这个问题，并介绍了用各种不同的方式实现您想要的结果的线夹紧。

Answer 2

解决方案一：

仅使用 webkit -webkit-line-clamp 属性 2 行。

.overme {
    width: 300px;
    height: 60px;
    line-height: 30px;
    overflow:hidden; 
    font-size: 30px;
    color: red;
    background: #333;

    /*The problematic part is below*/
    white-space:nowrap; 
    text-overflow: ellipsis;
}
    
.overme {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

<div class="overme">
    how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>

解决方案 2

使用 :after 伪元素，与右下角对齐。这仅在您的文本是静态的并且您事先知道它会溢出容器时才有效。

.overme {
    width: 300px;
    height: 60px;
    line-height: 30px;
    overflow:hidden; 
    font-size: 30px;
    color: red;
    background: #333;
    position: relative;
}
    
.overme:after {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

<div class="overme">
    how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>

解决方案 3 - 跨浏览器

此 JS 解决方案将父容器 (div) 的高度与内容文本进行比较。如果文本高度大于父项的高度，则向父项添加 .overflows class。

要对此进行测试，请删除一些文本以使其适合父级。您将不再看到圆点。

$(".overme").each(function () {
  var $elem = $(this);
  $elem.addClass($elem[0].scrollHeight > $elem.height() ? 'overflows' : null);
});

.overme {
    width: 300px;
    height: 60px;
    line-height: 30px;
    overflow:hidden; 
    font-size: 30px;
    color: red;
    background: #333;
    position: relative;
}
    
.overme.overflows:after {
    display: inline-block;
    background: #333;
    position: absolute;
    right: 2px;
    bottom: 0;
    content: '...';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overme">
    how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>

Answer 3

简单的方法是

{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

但不确定未来浏览器是否支持，因为属性还不稳定

.container {
  background-color: tomato;
  color: white;
  padding: 5px 10px 10px;
  width: 300px;
}

.title {
  height: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="container">
  <p class="title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

如果文本以 CSS 分隔，则在文本的第 n 行显示点

Show dots on the nth line of a text if it breaks with CSS

css

line-breaks