文字超出不换行，用省略号表示

overflow: hidden;    //超出部分隐藏
white-space: nowrap;    //不换行
text-overflow:ellipsis;     //文字超出部分用省略号表示

以上为单行超出

多行的话，可以用

overflow: hidden;

/*文字超出用省略号*/

text-overflow:ellipsis;

/*盒子模型*/

display:-webkit-box;

/*显示的文本行数*/

-webkit-line-clamp:3;

/*子元素的垂直排列方式*/

-webkit-box-orient:vertical;

或者使用jq插件jQuery.dotdotdot，不用设定行数，它会根据你DIV的高度，当超出的时候自己加入省略号

时间： 2024-11-05 19:25:02

文字超出不换行，用省略号表示的相关文章

文字超出隐藏并显示省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法 一是用程序开截取字符长度,这个其实也是可以的 第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧, css样式如下: .css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2 { overflow: hidden; /

设置一个DIV的文字超出隐藏，并用省略号表示未完待续

<div style="width:50px;height:18px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续</div>

css文字描述，换行，省略号的一般设置

强制不换行:white-space: nowrap; 强制换行:word-break: break-all; 文字超出范围用省略号:text-overflow: ellipsis;overflow: hidden; 段落换行的一般的设置:设置固定的宽高,然后,设置文字的line-height: 注意:设置line-height:18px;height:18px;text-align:center;文字就会居中

html + CSS实现文字超出长度隐藏,显示省略号

表格: table{ table-layout: fixed; } } t td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一

文字溢出不换行显示省略号

单行 white-space: nowrap; text-overflow:ellipsis width: 200rpx; overflow:hidden; 多行display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 原文地址:https://www.cnblogs.com/zzzzzzzsy/p/8720018.html

适配移动端的文字超出隐藏并添加省略号

overflow: hidden; text-overflow: ellipsis; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 4; /* 显示4行,为auto时不隐藏 */ -webkit-box-orient: vertical; 查看全部与收起事例 <div class="notice" style="-webkit-line-clamp: 4"&g

关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <div> <p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p> </div> CSS代码: div{ width: 200px; } span{ display: block; width: 200px; ove

css文字超出自动显示省略号

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行

css 文字超出部分显示省略号(原)

单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN{ width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} 兼容写法(但是当文字不够长的时候省略号还是会存在,需要js判断一下) #word