AngularJS ng-repeat实现4行文本溢出省略后内联显示View More链接问题

根因说明 #

你现在的问题核心是文本容器为独占一行的块级元素，后续链接元素自然会换行，同时原生多行省略的省略号是渲染在容器最右侧，没有预留链接的展示位置。调整方案如下：

1. 调整HTML嵌套结构 #

将View More链接放到文本容器内部，作为子元素存在：

<div class="comment-wrapper">
  <div class="comment1 aop-ellipssis four">
    {{item.description}}
    <span ng-if="c.isOverflown('comment1',$index)" ng-click="c.openLink(item.sys_id)" class="ag-link" >View More</span>
  </div>
</div>

2. 调整CSS样式 #

通过相对+绝对定位把链接固定在文本右下角，同时给文本预留出链接的展示宽度：

/* 外层容器继承你原来设置的固定宽度 */
.comment-wrapper {
  width: 你原本设置的文本固定宽度;
  position: relative;
}
.comment1.aop-ellipssis.four {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5; /* 建议固定行高方便计算高度 */
  /* 右侧预留链接宽度，避免文字被链接遮挡 */
  padding-right: 80px; 
  word-break: break-all;
}
/* View More链接样式 */
.ag-link {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 背景色和页面背景保持一致，覆盖原生的省略号 */
  background: #fff; 
  padding-left: 4px;
  color: #1890ff;
  cursor: pointer;
}

如果页面背景不是纯色，可以用渐变遮罩优化展示效果：

.ag-link {
  background: linear-gradient(to left, #fff 70%, transparent);
  padding-left: 12px;
}

3. 可选：微调溢出判断逻辑 #

增加1px容错值，避免边界内容的判断误差：

function _isOverflown(elem,index){
    var element = angular.element('.'+elem)[index];
    return element.scrollHeight > element.clientHeight + 1;
}

兼容方案 #

如果需要兼容非webkit内核浏览器，可以替换为JS截断逻辑：判断溢出时，将文本截断到刚好4行的长度，手动拼接... View More字符串即可，也能实现完全一致的效果。

内容的提问来源于stack exchange，提问作者LeaF