一种目前最常用的控制换行的css样式属性_糖糖

http://blog.sina.com.cn/u/1603851024

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

一种目前最常用的控制换行的css样式属性

(2011-12-23 09:41:40)

标签：

里加

css样式

对象

省略号

滚动条

杂谈

分类：技能

    在实际应用当中，有时候一非常长的句子或英文单词不停的向右延续使得元素被拉长了，这时候我们就可以用到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个字符了。

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

例子如下:

<body>
<div >
<ul>
<li><a target="_blank" href="http://news.sina.com.cn/s/2007-07-04/102313373001.shtml">医院拒收无钱孕妇致婴儿死亡</a></li>
<li><a target="_blank" href="http://news.sina.com.cn/s/2007-07-04/024613368473.shtml">流浪汉不看手表可准确报时</a></li>
<li><a target="_blank" href="http://news.sina.com.cn/s/2007-07-04/021612139023s.shtml">飞机窗户爆裂乘客险被吸走</a></li>
<li><a target="_blank" href="http://news.sina.com.cn/s/2007-07-04/144413374465.shtml">白领三个月不吃肉抵制高肉价</a></li>
<li><a target="_blank" href="http://news.sina.com.cn/s/2007-07-04/021612139023s.shtml">卡车强行冲卡当场碾死女收费员</a></li>
</ul></div>
</body>
</html>

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：7种气质女人,男人会疼你到心坎

后一篇：资深网页设计师是这样炼成的？

新浪BLOG意见反馈留言板　欢迎批评指正