Question

如果文本中断，我想在文本的第n行（在我的第二个案例中）显示点。我看到了this和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

解决方案1：

仅使用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类。

要测试此项，请删除一些文本，使其适合父项中的所有文本。你将不再看到这些点。

$(".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 2

看一下这篇文章CSS Tricks，它帮助我解决了这个问题，并介绍了用各种不同方法实现所需结果的线条夹紧。

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行显示点

3 个答案: