logo标签列表

文本无法在段落元素中换行

htmltwitter-bootstrapcss
71

我有两个浮动的div，分别位于左右两侧，并包含p标签内的文本。 p标签中的文本不会换行，只会溢出容器，如您在图像下方看到的文字所示：

示例：

我的HTML代码如下：

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

我的CSS：

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

有人以前经历过这种情况吗？我从未经历过！！让我疯了！

13个回答
146

将此样式应用于 <p> 标签。

p {
    word-break: break-all;
    white-space: normal;
}
6
这将根据字符来分割单词。您可能希望使用 word-break: normal; 并为父元素设置一个 width。 - Marais Rossouw
@MaraisRossouw 这是同一个被接受的。 - Praveen Kumar Purushothaman
8
这里的关键是空格。 - WitaloBenicio
6
white-space: normal; 对我起了作用。 （意思是该CSS代码解决了某个问题） - Romesh D. Niriella
@preciousbetine 这里的情况是有其他CSS被应用了。这就是为什么。比如使用 * {white-space: nowrap;} 或类似的东西。只是为了确保事情顺利进行。 - Praveen Kumar Purushothaman
显示剩余5条评论
118

只有在出现单词断点时才会出现换行。

如果您有一个与此一样长的“单词”，那么它就没有地方可以断开。

适当的解决方案是编写真正的内容，而不是无意义的字符串。如果您正在使用用户生成的内容，则应检查异常长的单词并禁止它们（或在URL中剪切它们的一部分，同时保持整个链接）。

或者，您可以使用word-break CSS 属性告诉浏览器在单词中间进行换行。

p { word-break: break-all }

（请注意浏览器支持）。

或者，如果文本无法适合容器，则可以使用overflow截断文本。

非常感谢！我一直在努力找出导致网站内容溢出的原因。这确实与单词换行有关！ - Code_Like_a_Newbie
23

对于那些仍在努力的人们，请确保检查并查看您是否为相关字体设置了行高值：这可能会覆盖单词换行。

谢谢你帮我缩小了这个问题的范围！在看到你的答案之前，我无法使绝对定位的段落完全换行。果然，字体行高已经在父元素上设置，并妨碍了任何其他尝试影响单词换行的方法。 - Dan Ward
5
那是因为你有连续的文本，也就是说单个长单词没有空格。为了解决这个问题，请添加word-break: break-all;。
.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; 
    word-break: break-all; 
    background:red;
}

演示

4
这不是对问题的答案，但我在寻找解决我的问题时发现了这个页面，想提到我找到的解决方案，因为这花费了我很多时间。希望这对其他人有用：
问题是，在
中，<p>标签中的文本将不会折叠。最终，我打开了检查器，并注意到所有单词之间都有一个“不换行空格实体”。 我的编辑器vi只显示正常的空格（一些不可见的chr，我不知道是什么），但我复制并粘贴了来自PDF文档的文本。 解决方案是从vi中复制一个空格，并用空格替换它。即：%s/ / /g其中要替换的空格是从有问题的文本中复制的。问题得到解决。
4

如果希望通过完整的单词换行，请使用以下方法:

p { word-break: break-word; }

否则，您可以使用：
p { word-break: break-all; }
4
这个问题已经有点晚了，但其他人可能会受益。 我遇到了类似的问题，但需要文本在所有设备大小上正确换行。所以在我的情况下，这种方法有效。需要设置视口。
 .p
   {
   white-space: normal;
    overflow-wrap: break-word;
    width: 96vw;
   }
3

如果一个容器中的单词或连续字符太长而不适合一行，您可以使用word-wrap来断开它们。

word-wrap: break-word;

这将在适当的断点处保留换行，除非单个字符字符串无法适应一行，此时会进行换行。 JSFiddle
3
解决方案实际上是这样的：
p{
    white-space:normal;
}

您可以通过修改word-break属性来改变断词行为。

p{
    word-break: break-all; // will break at end of line 
}

break-all: 将在最后一个单词处断开字符串，强制换行 word-break: 更像是美观的断行，会在适当的位置（如问号）处自动换行 normal: 与word-break相同

“white-space:normal” 是 p 元素的默认设置，因此不会有任何影响。 - Quentin
“word-break: break-all”已经被前四个答案提出。 - Quentin
我已在实际环境中进行了测试，可能会分享截屏。 - TheTechGuy
我正在调试修改后的 p 值，因此 white-space:normal; 正是我要找的！谢谢！ - Andru
0
简单
p{
    word-wrap: break-word;
}
4
欢迎来到Stack Overflow。@Kevin Oonk在2014年的回答中已经建议使用word-wrap: break-word;。请确保您的回答提供实质性和新的内容，并且不仅仅是重复现有答案的信息。 - Bryan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接