如何在换行符上包装长单词,并避免使用CSS进行水平滚动?

时间:2011-10-13 21:36:36

标签: css scroll word-wrap textwrapping

我有以下的HTML:

<div class="box">
    long text here
</div>

和css:

.box {
    width: 400px;
    height: 100px;
    overflow: auto;
    border: 1px gold solid; 
}

我只想要一个垂直滚动。但是当一个单词太长时,会显示一个水平滚动。如何使长词包裹?

如果需要,我可以使用jQuery或PHP的技巧,但我想用CSS解决它,因为它是CSS的工作。

你可以在这里弄乱:http://jsfiddle.net/879bc/1/

3 个答案:

答案 0 :(得分:25)

答案 1 :(得分:2)

对于自定义分词,有一个不经常使用的html特殊字符 - &shy;(软连字符) - 将在2行上分割单词并在单词的第一部分之后插入短划线这个词接近其容器的边缘。麻烦的是,你必须把它们放在你想要的任何地方。如您所说,您也可以设置js或php函数,并将它们插入适当的位置。

答案 2 :(得分:0)

我过去使用的解决方案是jquery的http://dotdotdot.frebsite.nl/省略号库,你可以指定字符数,然后在它之后加点点点,这样它就可以放在一行上。