一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现:

 div { // 单行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
 div { // 多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 注意不是flex
-webkit-line-clamp:; // 指定行数
-webkit-box-orient: vertical; // box元素排列水平方式
}

css实现文本超出部分省略号显示的更多相关文章

  1. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  2. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  3. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

  4. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  6. CSS强制文本在一行内显示若有多余字符则使用省略号表示

    这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...

  7. CSS控制文本在一行内显示,若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  8. CSS实现文本超过指定长度显示省略号

    <style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...

  9. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

随机推荐

  1. SQL注入之Sqli-labs系列第三十二关(基于宽字符逃逸注入)

    开始挑战第三十二关(Bypass addslashes) 0x1查看源代码 (1)代码关键点 很明显,代码中利用正则匹配将 [ /,'," ]这些三个符号都过滤掉了 function che ...

  2. Gym - 101201E:Enclosure (点到凸包的切线)

    题意:给点N棵树,前K棵是已经拥有的,现在可以再拥有一棵树,问形成的最大凸包面积. 思路:先求K棵树的凸包C,然后对于后面的N-K棵树,我们先判断是否在凸包内,如果不在,我们要求两个切线. 这里分类讨 ...

  3. PTA寒假一

    7-1 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 所谓"沙漏形状",是指每行输出奇数个符 ...

  4. 面向对象的编程思想和Java中类的概念与设计

    面向对象的编程思想学习,面向对象内容的三条主线;1.java类及类的对象2.面向对象的三大特征3.其他关键字学习内容:3.1面向对象与面向过程面向对象与面向过程在应用上的区别 Java中类的概念与设计 ...

  5. python 【winerror2】系统找不到指定的路径

    # _*_ coding:utf-8_*_from selenium import webdriver driver = webdriver.Firefox()driver.get("htt ...

  6. USG防火墙DHCP设置保留IP地址

    在使用disp cur查看当前配置 然后使用undo修改 这样10.0.1.1网段到10.0.1.100之间的IP地址不会分出去

  7. shell脚本实现定时备份某文件

    1:目标       实现在图像化界面输入需要备份的源文件路径.目标路径,定时的时间.然后通过输入的信息,把需要备份的源文件打包放到指定的目标路径下以执行定时任务的时间为子目录       把/she ...

  8. Sublime远程连接Linux

      1:Ctrl+Shift+P,输入install 选择红框框然后Enter       2:输入ftp,然后找到sftp,Enter       3:修改配置     修改账号密码信息远程路径之后 ...

  9. Docker常用命令(四)

    通过一些例子来了解基本的命令使用   1.查看docker信息       docker info         2.安装完Docker后,里面还有任何镜像,先从仓库下载一个基础镜像,然后在这个基础 ...

  10. 引入public文件目錄下js/css文件

    <link href="{{ URL::asset('css/ySelect.css') }}" rel="stylesheet" type=" ...