HTML 自动换行不起作用？答案

【问题标题】：HTML Automatic line-break doesn't work?HTML 自动换行不起作用？
【发布时间】：2012-07-29 00:40:45
【问题描述】：

我声明了width 和margins，但不知何故我的行没有被自动换行符换行。

编辑：我找到了原因。这是因为单词之间没有空格：

teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;teest&nbsp;

【问题讨论】：

你能澄清你的问题吗？目前尚不清楚您想要实现什么。你的意思是white-space:normal？
你想做什么？详细解释。
What have you tried? 至少添加一个short example 你的问题。
看在上帝的份上，为什么会有这么多反对票？合法的问题。我也遇到过，我无法删除 &nbsp，因为它是从愚蠢的 CMS 格式化的。

标签： html css enter

【解决方案1】：

文本所在的元素应该有css声明：

div {
    display: block;
    width: 200px; /*based on how much width this div should have*/
}

如果不起作用，请尝试：

div { word-wrap: break-word }

【讨论】：

word-wrap: break-word 有帮助，但有时会中断一半的单词；/
能否提供非工作部分或整个页面的 css 和 html？我很确定它会帮助任何人认识到问题

【解决方案2】：

    Try with `word-wrap` 

     #id
         { 
           word-wrap: break-word ;/*Allows unbreakable words to be broken*/
         } 

     #id
        { 
          word-wrap: normal ;/*Break words only at allowed break points*/
        }

【讨论】：

【解决方案3】：

真正的问题是：你到底为什么要在你的情况下使用？

每个空间是 6 个字节而不是 1 个字节！

除了存储和文件大小的浪费之外，搜索引擎还会试图理解它。

我会选择退出您必须使用的任何原因并选择加入简单的空间（“”），对于 SEO 和 - 更重要的是 - 更少浪费的空间.这样，您将实现相同的目标，但为网站访问者提供的下载量较小。

【讨论】：

【解决方案4】：

这将打印每行中的每个句子，没有<br>

<p style="font-family:courier;white-space: pre;">
First Line
Second Line
Third Line
</p>

例如检查 jsfiddle http://jsfiddle.net/muthupandiant/sgp8rjfs/

【讨论】：

【解决方案5】：

这个一个一个试试，一定对某些情况有帮助：

p{
    display: block; /* or inline-block, at least its a block element */
    width: 100px; /* or width is certain by parent element */
    height: auto; /* height cannot be defined */
    word-break: break-all; /*  */
    word-wrap: break-word; /* if you want to cut the complete word */
    white-space: normal; /* be sure its not 'nowrap'! ! ! :/ */
}

【讨论】：

【解决方案6】：

另一种方法是：

white-space: pre-wrap; // preserve whitespace, the text is wrapped
overflow-wrap: break-word; // text is wrapped, line break on the end of a word

【讨论】：