1

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

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

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

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

4

5 回答 5

2

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

编辑：

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

于 2012-09-24T20:33:37.203 回答
1

我会将“单词”单独包装起来，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> 
​
于 2012-09-24T20:35:24.460 回答
0

如果单词不适合 div，单词会自动转到下一行，但是由于您已将单词分解为单个字母，这就是字母不会作为单词粘在一起的原因。如果你想让字母粘在一起，我会使用 a<br />如果它不在同一行。这很草率，但你还是把这些字母打散了。

于 2012-09-24T20:28:11.217 回答
0

你说的“词”是什么意思？正如 KRyan 所说，这是具有指定宽度的 div 的默认行为。html 不知道，当然，你在 word 下理解的词汇方面，这很愚蠢。只需将构成单词的跨度集合（由您决定）包装到另一个 div（或跨度）中。

于 2012-09-24T20:31:24.350 回答
0

这可能会帮助您： 

 .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;
    }
于 2015-07-06T07:11:17.253 回答