Question

我有一个div，它由应用于文本段的不同样式的单词组成。

我正在尝试实现一个布局，如果文本超过div的宽度，它应该转到下一行。基本上：没有断字此外，这里的关键是确保一个单词永远不会中断，如果整个单词不能水平放入div内，它应该移到下一行。

我们可以假设宽度至少大于最长单词的宽度。

http://jsfiddle.net/cH5tN/15/

Answer 1

你应该做两件事。使用css属性'white-space: no wrap'并将程式化字母嵌套在单个范围内。这是更新的小提琴http://jsfiddle.net/cH5tN/44/

编辑：

此外，您应该避免不间断的空格，只需使用空格，除非有特定原因您不希望文本在特定空间中断。

Answer 2

我将“单词”包装在一个单独的div中并且只是样式。既然你可能已经将单词分成不同大小的字符（服务器端），那么可以很容易地在'单词'周围放一个小的div包装器？

这些内容：（http://jsfiddle.net/SS8rV/）：

<style type="text/css">
.word
{
    float: left;
    height: 64px;
}
#box
{
    width:390px;
    height:390px;
    border:1px solid #F00;
    position:absolute;
    top:0px;
    left:0px;
}
</style>

<div id='box'>
    <div class='word'>
        <span style="font-size:64px;">L</span>
        <span style="font-size:16px;">ONGESTWOR</span>
        <span style="font-size:42px;">D</span>
    </div>
    <div class='word'>
        <span style="font-size:36px;">&nbsp;</span>
    </div>
    <div class='word'>
        <span style="font-size:24px;">regular&nbsp;</span>
    </div>
    <div class='word'>
        <span style="font-size:48px;">w</span>
        <span style="font-size:96px;">id</span>
        <span style="font-size:72px;">est</span>
    </div>
</div>

Answer 3

如果单词不适合div，单词会自动转到下一行，但是因为你用单个字母打破了单词，这就是为什么字母不会粘在一起作为单词。如果你想把这些字母粘在一起，我只会使用<br />，如果它不在同一条线上。它很草率，但无论如何你都打破了这些字母。

Answer 4

你是什么意思＆＃34;字＆＃34;？正如KRyan所说，这是具有指定宽度的div的默认行为。当然，html不知道你在词汇下理解的词汇方面，那是愚蠢的。只需将构成单词的跨度集（包含所有关于你的内容）包装成另一个div（或跨度）。

Answer 5

这可能会对您有所帮助：

 .message{
         white-space: -moz-pre-wrap !important;
         white-space: -pre-wrap;
         white-space: -o-pre-wrap;
         white-space: pre-wrap;
         word-wrap: break-word;
         word-break: break-all;
         white-space: normal;
    }

如果内容超过html div的固定宽度，我如何将文本放入下一行

5 个答案: