多行文字超出省略显示

        .ellipsis-1{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;word-break:break-all}
        .ellipsis-1{-webkit-line-clamp:1}

时间： 2024-10-17 19:02:43

多行文字超出省略显示的相关文章

文字超出省略显示为点点

对于文字溢出的解决,若是PC端还好控制,但是在手机端的控制就比较复杂了. 曾尝试用百分比设定宽度,可是却总会撑开,出现滚动条.而尝试用em值,不同手机浏览器的显示效果又不同,切距离看起来会拉的很大. 最后的解决办法: 用jQuery,动态获取屏幕的宽度,然后再按百分比赋值给需要控制溢出的类.最后还不能忘了,溢出超过显示省略号的三个属性,将这个属性所归的类名添加给需要控制的类.这样不管屏幕大小怎么变.每刷新一次就能实现想要的效果. 另外,想要实现页面跳转,不一定要用a标签,用这个即可, <li

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 多行文字超出部分省略号一行文字超出部分省略号

1.  html: <div class="con" > <div id="div1" > 1 hello world!这是我内容的超出三行省略号显示!2hello world!这是我内容的超出三行省略号显示!3hello world!这是我内容的超出三行省略号显示! </div>

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

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

单行和多行文字溢出省略

.text-ellipsis /* { 单行文字溢出省略 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 文字溢出省略 */ white-space: nowrap; /* 文字不换行 */ } .multiline-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webki

多行文字内容溢出显示点点点（...）省略号

1.常规css方法——使Firefox以外主流浏览器文字溢出省略号表示下图为此常用方法在各个浏览器下的表现: IE6浏览器下 IE7浏览器下 chrome谷歌浏览器下 Safari浏览器下 opera浏览器下 Firefox火狐浏览器下可以看到,仅在Firefox火狐浏览器下无法实现文字溢出省略号表示,其文字直接从中间咔掉了.综合考虑代码成本,表现效果,我个人觉得这样子已经算是不错的了,追求完美和实际效益之间要追求一定的平衡.如果页面上很多文字都溢出,则需要寻求更兼容的方法,要是偶尔会出现文

div中只显示2行文字超出隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; overflow: hidden;//超出隐藏 text-overflow: ellipsis;//超出文本设置为... display:-webkit-box

多行文本，垂直居中显示，文字超出高度显示省略号

最近项目中遇到多行文本,显示不全想打省略号,块状文本垂直居中显示,功能实现如下, html:结构 <div class="questype-rate"> <ul class="clearfix"> <li> <div class="namebox"> <div class="question-name"> <div class="namerow&quo

单行、多行文字超出显示省略号

单行 display:inline-block/ block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;