内容超过长度后以省略号显示的几种实现方式

CSS实现：

单行文本

样式：

{200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

优点：简单快捷，不用手动去设置字数

说明：

white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。

overflow: hidden 隐藏超出单元格的部分。

text-overflow: ellipsis 将被隐藏的那部分用省略号代替。（若设置为text-overflow:clip 则超过的部分直接被剪掉，不加省略号）

tips:预先设置好宽度

多行文本（未实践）

p{
   200px;
   height: 32px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   font-size: 14px
}

这里用了一个不是很常见的属性 -webkit-line-clamp

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性) -webkit-line-clamp ；注意：这是一个不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

1.display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

2.-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

3.text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

 参考：http://www.tuicool.com/articles/MB3amay

JSTL标签实现：

${fn:length(row['key']) > 14 ? fn:substring(row['key'],0,14) : row['key']}${fn:length(row['key']) > 14 ? '…' : ''}

或者

<c:if test="${fn:length(liveThemes[1].themeTitle)>17 }"> 
${fn:substring(liveThemes[1].themeTitle, 0, 16)}... 
</c:if> <c:if test="${fn:length(liveThemes[1].themeTitle)<=17 }"> 
${liveThemes[1].themeTitle }
</c:if>

JS里处理：

var title = $("#title").html();
if (title.length > 26) {
    title = title.substring(0, 24) + "......";
}
$("#otitle").html("访谈主题：" + title);

内容超过长度后以省略号显示的几种实现方式

相关推荐