text-overflow

CSS 中的强制换行和禁止换行

我们两清 提交于 2019-11-28 07:11:27
强制换行 1、word-break: break-all; 只对英文起作用,以字母作为换行依据。 2、word-wrap: break-word; 只对英文起作用,以单词作为换行依据。 3、white-space: pre-wrap; 只对中文起作用,强制换行。 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,用IE6浏览时,常看到内容错位,非常影响网站的美观。另一方面,对二分栏结构的网站,在侧栏放一些文章标题时,如果标题过长它又是自动换行的,也影响版面的美观。 在CSS里,主要有强制换行和禁止换行。 一、强制换行 1、word-break: break-all; 只对英文起作用,以字母作为换行依据。 2、word-wrap: break-word; 只对英文起作用,以单词作为换行依据。 3、white-space: pre-wrap; 只对中文起作用,强制换行。 word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的内容自动换行,它们的区别在于: 1、word-break:break-all

添加省略号

*爱你&永不变心* 提交于 2019-11-27 04:10:25
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。 通常的做法是这样的: 1.overflow:hidden; 2.text-overflow:ellipsis; 3.-o-text-overflow:ellipsis; 4.white-space:nowrap; 5.width:100%; 其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6; 该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。 下载这个Jquery插件:jQuery ellipsis plugin 调用方法: 1.$(document).ready(function() { 2. $('.ellipsis').ellipsis(); 3.} 转载于:https://www.cnblogs.com/ivan0626/archive/2013/03/29

标题长度超出CSS样式时,自动显示为省略“...”

[亡魂溺海] 提交于 2019-11-26 18:40:39
text-overflow 版本:IE6+专有属性 继承性:无 配合overflow:hidden使用。 语法: text-overflow : clip | ellipsis 参数: clip :  不显示省略标记(...),而是简单的裁切 ellipsis :  当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。 转载于:https://www.cnblogs.com/alonghay/archive/2011/05/10/2042381.html 来源: https://blog.csdn.net/weixin_30314793/article/details/99026561

记一个ios下text-overflow: ellipsis 与 text-align: justify 冲突的问题

霸气de小男生 提交于 2019-11-26 16:37:37
https://codepen.io/hzsrc/pen/PMavxW 以下代码在ios下打开,后面那三个“...”会与文字重叠。 <div class="ellipsis2">手动积分手动2积分手动积分手动积分手动积分手动积分手动积分手动积分手动积分</div> <style> .ellipsis2 { overflow: hidden; text-overflow: ellipsis; /*! autoprefixer: ignore next*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; -webkit-box-align:end; width:200px; text-align: justify; } </style> 原因是ios下text-overflow: ellipsis 与 text-align: justify 冲突的bug。 解决办法只能是避免同时使用 text-align: justify; 来源: https://www.cnblogs.com/hz-blog/p/11326679.html