css3 文字溢出换行实现方案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .title { text-align: left; -webkit-line-clamp: 2; -webkit-box-orient: v…

/*强制换行*/.f-break {word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word;/*支持IE,chrome,FF*/}/* 单行文字溢出时出现省略号,需设定宽度 */.f-ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}…

css处理文字不换行、换行截断、溢出省略号

1.使文字不换行 white-space: nowrap; 值描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止. pre-wrap 保留空白符序列,但是正常地进行换行. pre-line 合并空白符序列,但是保留换行符. inherit 规定应该从父元素继承 white-space 属性的值. 2.允许长单词换行 word…

css3文字与字体的相关样式

给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length color: 其中前三个length表示阴影离开文字的横方向距离,纵方向距离,和阴影的模糊半径,阴影的颜色.前两个参数为阴影离开文字的距离可以为负值,负值代表向上,向左移动.颜色的参数不能省略,省略该参数则不会绘制阴影.指定多个阴影,并且对多个,阴影可以使用不同的颜色,指定多个阴影时使用逗号将多个阴影…

CSS 文本和表格中文字溢出显示省略号

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;…

css+div如何解决文字溢出

看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大,这个一般容易解决,但是我今天就遇到了这样的问题:在 IE6下测试页面没反应,在IE8下测试页面却正常处理了溢出文字,我就郁闷了,这个溢出处理不是IE特有的吗?怎么IE6却不正常呢.后来网上查了才知道,原来IE6只支持div内写上溢出处理才有用,而IE…

CSS文字溢出部分自动用"..."代替

CSS文字溢出部分自动用"..."代替如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p>上海出发,机+酒包含:早晚餐+快艇</p> CSS样式 #tour h4{ white-space: nowrap; /*文本不换行*/ overflow: hidden; /*溢出部分隐藏*/ text-overflow: ellipsis; /*溢出部分用"..."代替…

table不让td中文字溢出操作方法

table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示…

css文字溢出显示省略号

1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;//控制文本现实的行数 overflow: hidden;…

td文字溢出显示省略号

昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflow:ellipsis;//显示省略号 } 然后查了查网上遇到的类似问题,用table-layout:fixed;可以解决此问题,但是我发现这个方法并不完美,甚至改变了我设置的td的大小,本来以30%和70%的显示的td,设置此属性之后居然以50%和50%显示,这就让我不爽了.于是乎花了好长时间解决这…