Question

我在页面右侧有框，我需要在左侧显示长词。我的问题是长话后跳了一下。我添加“word-wrap：break-word;” - 但是是一样的。

<style>
.page{
    width: 380px;
    height: 600px;
    margin: 0 auto;
    background-color: #146A01;  
    word-wrap: break-word; 
}
.box{
    float: right;
    width: 200px;
    min-height: 200px;
    background-color: #336699;
}
</style>
</head>
<body>
    <div class="page">
        <div class="box">Some text</div>
        Lorem ipsum<br/>
        Lorem ipsum small text small tekst small<br/>
        VerylongTextIsHEREVerylongTextIsHEREV               
    </div>    
</body>

Answer 1

从容器的宽度大于长文本宽度的那一刻起，将它放在尽可能不破坏它的位置。一种可能的解决方案是使用span包装大文本，然后使用以下css：

.page span {
    display: block;
    width: 180px;
    word-wrap: break-word;
}

演示：http://jsfiddle.net/s6XjW/4/

Answer 2

组合使用自动换行和分词...

.page{
    width: 380px;
    height: 600px;
    margin: 0 auto;
    background-color: #146A01;
    word-wrap: break-word; /* Internet Explorer 5.5-7 */
    word-break: break-all; /* Internet Explorer 8-9 */
}

看看这个fiddle。

Answer 3

您是否可以控制页面上显示的文字？

如果是，那么您可以尝试在长词中插入一个软连字符。它指示可能发生可选分词的位置。

aterriblylengthy&shy;longword

css，html显示长话

3 个答案: