54

我有两个浮动的 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;
}

有谁之前经历过这个吗？我没有！！快把我逼疯了！

4

13 回答 13

119

将此样式赋予<p>标签。

p {
    word-break: break-all;
    white-space: normal;
}
于 2013-01-23T10:17:34.747 回答
106

换行仅在有分词时发生。

如果你有一个这么长的“词”，那么它就没有地方可以打破。

正确的解决方案是编写真实的内容，而不是无意义的字符串。如果您使用的是用户生成的内容，请添加一个检查异常长的单词并禁止它们（或为 URL 删除其中的一部分，同时将整个内容保留在链接中）。

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

p { word-break: break-all }

（注意浏览器支持）。

或者，如果文本不适合容器，您可以使用overflow它来截断文本。

于 2013-01-23T10:20:47.087 回答
21

对于仍在苦苦挣扎的任何人，请务必检查并查看您是否在相关字体上设置了 line-height 值：它可能会覆盖自动换行。

于 2015-09-24T00:01:32.120 回答
5

那是因为您有连续的文本，这意味着没有空格的单个长单词。打破它添加word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; 
    word-break: break-all; 
    background:red;
}

演示

于 2013-01-23T10:18:17.823 回答
4

这不是问题的答案，但是当我在寻找我遇到的问题的答案时找到了这个页面时，我想提一下我找到的解决方案，因为它花费了我很多时间。希望这对其他人有用：

问题是 <p> 标记中的文本不会在 div 中折叠。最终，我打开检查器，发现所有单词之间都有一个“无中断空间实体”。我的编辑器 vi 只是显示正常的空格（一些不可见的字符，我不知道是什么），但我从 PDF 文档中复制粘贴了文本。解决方案是从 vi 中复制一个空格并用空格替换它。IE。:%s/ / /g 其中要替换的空白是从有问题的文本中复制的。问题解决了。

于 2014-02-07T13:43:30.010 回答
3

如果它不适合容器中的一行，您可以使用自动换行来分解单词或连续的字符串。

word-wrap: break-word;

这将在适当的断点处保持断行，除非单个字符串不适合一行，在这种情况下它将中断。

JSFiddle

于 2014-02-26T16:49:07.193 回答
3

解决方案其实是

p{
    white-space:normal;
}

您可以通过修改 word-break 属性来更改中断行为

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

break-all：将在最后断开字符串，在最后一个单词处断开 word-break：更漂亮的刹车，例如在？点法线：与分词相同

于 2019-03-16T08:02:32.183 回答
3

这个问题有点晚了，但其他人可能会受益。我遇到了类似的问题，但对文本有一个额外的要求，以正确包装所有设备尺寸。所以在我的情况下，这有效。需要设置视口。

 .p
   {
   white-space: normal;
    overflow-wrap: break-word;
    width: 96vw;
   }
于 2020-07-30T15:27:17.323 回答
1

简单的

p{
    word-wrap: break-word;
}
于 2016-11-17T21:12:35.127 回答
0

如果想要的结果是通过完整的单词使用来换行：

p { word-break: break-word; }

否则你可以使用：

p { word-break: break-all; }
于 2022-01-31T10:44:45.753 回答
0

添加width: 100%;到有问题的 p 元素为我解决了这个问题。我不知道为什么它有效。

于 2020-05-22T15:28:18.753 回答
-1

对于发现自己在这里的其他人，我正在寻找的 css 是

overflow-wrap: break-word;

它只会在需要时打破一个单词（单个单词的长度大于 p 的宽度），不像word-break: break-all它可以打破每一行的最后一个单词。

溢出包装演示

于 2019-04-11T19:21:35.277 回答
-3

将 float: left 属性添加到图像。

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
    float:left;
}
于 2013-01-23T10:17:28.497 回答