如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现单行文本省略

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                margin:0 auto ;

                width:300px;

                color: red;

                overflow: hidden;

                text-overflow: ellipsis;

                white-space: nowrap;

            }

        </style>

    </head>

    <body>

        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>

    </body>

</html>

结果

实现多行文本省略

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                margin: 0 auto;

                width: 300px;

                color: red;

                display: -webkit-box;

                -webkit-box-orient: vertical;

                -webkit-line-clamp:;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>

    </body>

</html>

结果

注意：CSS3属性记得添加前缀，如

 -webkit-box-orient

css多行文本省略号（...）的更多相关文章

  1. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  2. css多行文本省略号

    适用于内核为webkit的浏览器: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflo ...

  3. CSS 设置多行文本省略号 ...

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  4. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. [CSS备忘]多行文本省略号

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...

  6. 多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  7. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

随机推荐

  1. 2016级算法期末上机-C.简单·Bamboo's Fight with DDLs III

    简单·Bamboo's Fight with DDLs III 分析 一句话:贪心,简单哈夫曼应用,要求的其实是所有结点的值与权值的乘积之和,也就是带权路径长. 可以理解为非叶子节点的权值的和,这里的 ...

  2. css左右布局，左侧固定，右侧自适应

    实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...

  3. ReactNative 打包 APK

    ReactNative打包步骤: 1.在项目的根目录执行下面这行命令: keytool -genkey -v -keystore my-release-key.keystore -alias my-k ...

  4. Python：学习遇到的小问题：记事本写的脚本执行提示SystaxError:(unicode error) 'utf-8'

    学习了一段时间的Python因为懒没有坚持,现在又想学,在用记事本写好py脚本运行时报错:SystaxError:(unicode error) 'utf-8' 解决的方法: 因为我的笔记本系统自带的 ...

  5. [BZOJ 5072][Lydsy1710月赛]小A的树

    传送门 \(\color{green}{solution}\) 嗯...其实我也不太会,所以大胆猜个结论吧(后来证了一下,然后放弃了...). 我们发现如果要使一个联通块的黑点数量为\(k\)的方案最 ...

  6. Codeforces Round #555 (Div. 3) D. N Problems During K Days 【数学思维】

    一 题面 D. N Problems During K Days 二 分析 对于这题,刚开始我就是陷入了对公式的执着,企图用公式直接确定第一个数,然后试着去找序列.经过思考和手动模拟后发现是很难保证正 ...

  7. 图解http 笔记

    一,了解web以及网络基础 1,使用http协议访问web web页面是由web浏览器根据地址栏中指定的url从web服务器获取文件资源等信息然后显示的页面. 像这种通过发送请求获取服务器资源的web ...

  8. dede发布内容限制违规词

    DEDE限制违规词代码 //词汇过滤检查 if( $cfg_notallowstr != '' ) { if(preg_match("#".$cfg_notallowstr.&qu ...

  9. Table '.\gts\eventdata#P#p0' is marked as crashed and last (automatic?) repair failed

    修复数据表操 MYSQL数据表出现问题,提示:Error: Table './db_name/table_name' is marked as crashed and last (automatic? ...

  10. Hardware Emulation Platform (硬件仿真平台) 在IC验证中的运用情况如何？

    三个EDA公司都有自己的hardware emulation verification platform: Cadence Palladium, Synopsys ZeBu, Mentor Veloc ...