如何在换行符上括起长字，并避免使用CSS进行水平滚动? [英] How do you wrap long words on newline, and avoid horizontal scroll using CSS?

问题描述

我有以下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/

解决方案

word-wrap: break-word

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

I have the folowing 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.

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

解决方案

word-wrap: break-word

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

这篇关于如何在换行符上括起长字，并避免使用CSS进行水平滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！