Question

我必须将文本换行转换为两行，如果文本超过两行，则将添加椭圆。

目前它包装在多行和视图中看起来很奇怪。

到目前为止我在css中做了什么：

          <div class="list card item-text-wrap" ng-click="getNewsDetail(new)">
            <a  class="item item-thumbnail-left" href="#">
               <img   src="http:{{new.thumbnail}}">
                  <h2>{{new.summary}}</h2>
                   <p style="padding: 0;">{{new.date | date:'EEE, MMM d yyyy'}}  {{new.date |
                  date:'shortTime'}}</p>
            </a>
         </div>

当文本长度很短但是我希望它在两行中保持一致时，这是完美的工作，其余的部分用点（...）附加。

任何帮助都会非常感激。

Answer 1

因此，您无法仅使用CSS来完成此操作，因为您必须使用white-space: nowrap;才能使用text-overflow: elipsis;而nowrap不会让文字包含多行。

以下是与Jquery解决方案类似的问题：CSS word ellipsis ('...') after one or two lines

以下是专门介绍text-overflow的不同版本的页面以及处理它的不同方法：http://dotdotdot.frebsite.nl/

你需要JQuery才能做到这一点，但幸运的是你获得了很多控制权，可能会找到更好的视觉设计而不是省略号。

当然，将任何样式应用于包含文本的父元素。

e.g。

<!-- HTML -->
<!-- Give class of "date" -->
<p style="padding: 0;" class="date>{{new.date | date:'EEE, MMM d yyyy'}}  {{new.date | date:'shortTime'}}</p>

// Jquery
if ($('.date').height() > 50) {
    var words = $('.date').html().split(/\s+/);
    words.push('...');

    do {
        words.splice(-2, 1);
        $('.date').html( words.join(' ') );
    } while($('.date').height() > 50);
}

添加两行文本项

1 个答案: