HTML自动换行无效?

9

我声明了widthmargins,但是我的行没有自动换行。

enter image description here

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

teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest 

2
请问您能否澄清一下您的问题?不太清楚您想要实现什么。您是指 white-space:normal 吗? - Christoph
你想做什么?请详细说明。 - Ahsan Khurshid
你尝试过什么?至少添加一个问题的简短示例。 - Zeta
这个问题为什么会有这么多的踩?这是一个合理的问题。我也遇到过这种情况,但我无法删除 ,因为它是从愚蠢的CMS格式化而来的。 - Eduard Luca
6个回答

11

文字所在的元素应该具有以下CSS声明:

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

如果它不起作用,尝试这样做:

div { word-wrap: break-word } 

1
word-wrap: break-word 有帮助,但有时会把单词分开。;/ - Luke
1
你能提供不工作部分或整个页面的CSS和HTML吗?我相信这会帮助任何人识别问题。 - mswiszcz

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'! ! ! :/ */
}

3
另一种方法是通过以下方式进行:

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

1
这将每个句子单独显示在一行,不包含<br>标签。
<p style="font-family:courier;white-space: pre;">
First Line
Second Line
Third Line
</p>

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

0
    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*/
        } 

0

真正的问题是:你到底为什么要在你的案例中使用&nbsp;呢?

每个空格需要6个字节,而非1个字节!

除了浪费存储和文件大小之外,搜索引擎也会很难理解。

我建议你放弃使用&nbsp;的任何理由,并选择简单明了的空格(“ ”),这样既有利于SEO,更重要的是可以节省空间。这样一来,你就可以实现相同的目标,同时向网站访问者传递更小的下载量。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接