让文本禁止自动换行的方法--CSS
2012-3-19 23:37 Monday  

分类: CSS 标签: 别是 边界 好说 没什么 文本 评论(63) 浏览(35439)

white-space: nowrap;

/**下面这个方法也可以,特别是对于a**/

display:inline-block;

没什么好说的,就是禁止文本到边界了自动换行。

 

 

css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示

代码部分:

 

一般的文字截断(适用于内联与块):
==============CSS================
.text-overflow{
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;

overflow:hidden;
text-overflow:ellipsis;
}
=================================

对于表格的话,定义有一点不一样:
==============CSS================
table{
width:30em;
table-layout:fixed;
}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;

overflow:hidden;
text-overflow:ellipsis;
}
=================================

注:这个东东只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

 

css文字排版强行换行

代码结束

在这里,我们 给li中的列表项目的末尾改成了省略号,是因为li应用了text-overflow:ellipsis;的原因。text-overflow 可以使超 过对象宽度的内容不显示(使用clip值),也可以设为ellipsis也就是省略号代替了。不过前提是我们对li使用了word- break:keep-all;这个属性使得li中的元素被强制不换行。

举一反三:
在实际应用当中,有时候一非常长的句子或英文单词不停的向右延续使得元素被拉长了,这时候我们就可以用到work-break的 另一个用法:work-break:break-all;,还有一个属性帮我们实现了多余内容切断,就是overflow:hidden;这个属性用于设 置当一个对象中的内容超过对象宽度时,如何处理这个对象,注意是对象本身,而不是内容。

overflow有几个值要说明一下:
1.visible:对象随内容改变而改变
2.auto:使对象根据自己的内容自动产生滚动条
3.scroll:让对象一直拥有滚动条的存在

强制换行:
强制换行是排版中经常使用到的一种方法,无论是中英文,都有可能出现这种情况,推荐一种目前最常用的控制换行的css样式属性:
word-break:break-all;
word-warp:warp;
将这两行代码加入到你要控制的元素里,中英文通吃 。

还有前面开头项目列表,如果要去掉前面的项目符号,我们可以在ul里加一个list-style:none;这样就没有了,当然你也可以换成小图 标,那就是list-style-image:url(图片路径);但你会发现文字会压着图片了,只要在li中再加一个text-indent:2em; 就是控制首行文字的缩进值。em是相对单位,相对于本行其它文字字号的两倍,也就是2个字符了。

+1 25

留下你的看法: