用CSS控制文字的宽度

maqianli

浏览: 177653 次
性别:
来自: 长春市

最近访客更多访客>>

Luciferhell

caokuang_0

a441593390

shuijin水晶

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

在<head>与</head>之间写入

<style type="text/css">



</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个字符了。

2
顶

0
踩

分享到：

数据库设计三大范式应用实例剖析 | 恺撒码

2008-12-05 08:27
浏览 10079
评论(1)
分类:Web前端
查看更多

1 楼 bask 2008-12-05

根据你的样式如果在字中间有空格那么这个省略好会在最后一个空格后的文字起左右
不知道这样的怎么解决？^_^

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论