用CSS统制文字的宽度
日期：2014-05-17 浏览次数：20741 次
在<head>与</head>之间写入
<style type="text/css">
<!--
div{line-height:150%;
border:#ccc 1px solid;
font-size:12px;}
li{width:110px;
word-break:keep-all;
text-overflow:ellipsis;
overflow:hidden;}
-->
</style>
在这里，我们给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个字符了。
不知道 这样的怎么解决？^_^
