zoukankan      html  css  js  c++  java
  • 内容超过长度后以省略号显示的几种实现方式

    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);
  • 相关阅读:
    windows蓝屏错误小全
    大数据量下高并发同步的讲解(不看,保证你后悔)
    本地或者服务器同时启动2个或多个tomcat
    如何在同一系统里同时启动多个Tomcat
    Java配置----JDK开发环境搭建及环境变量配置
    Tomcat8内置jdk8运行环境发布web项目
    Tomcat 部署项目的三种方法
    Java Web(五) JSP详解(四大作用域九大内置对象等)
    Java 四大作用域总结
    JSP九大隐式对象
  • 原文地址:https://www.cnblogs.com/qiuting/p/7084430.html
Copyright © 2011-2022 走看看