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

I have the folowing html:

我有以下的HTML:

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

and css:

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

I want only a vertical scroll. But when a word is too long, a horizontal scroll is displayed. How do I make the long words wrap ?

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

If needed, I can use a trick with jQuery or PHP, but I would like to solve it using CSS, because it's CSS job.

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

You can fiddle here: http://jsfiddle.net/879bc/1/

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

3 个解决方案

#1

word-wrap: break-word

https://developer.mozilla.org/en/CSS/word-wrap

#2

For custom word breaking, there is an html special character that is not so often used- ­ (soft hyphen) - that will split words on 2 lines and insert a dash after the first part of the word if the word approaches the edge of its container. Trouble is, you'll have to place them everywhere you want them. As you say, though, you can also set up a js or php function, and insert them into the appropriate places.

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

#3

The solution I have used in the past is an ellipsis library like http://dotdotdot.frebsite.nl/ for jquery, you can specify the number of chars and have it dot dot dot after that so it all fits on one line.

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