CSS：换行符不'；I don’我不能排太长的队

这就是我所面临的问题： 我的页面的正常视图应如下所示：

但是，有时内容太长，请将页面改为：

HTML只是：

<p>[soundcloud url="https://api.soundcloud.com/tracks/223450967"....</p>

[soundcloud url=”https://api.soundcloud.com/tracks/223450967“

我想原因是行太长了。（

url=）https://api.soundcloud.com/tracks/223450967“

）。我该怎么做

=============

我所尝试的：

P{wordwrap:break word；}

。它不起作用

溢出：隐藏的

，不起作用。我不想要固定宽度的，因为我想要响应

我想问题可能是

外部div

的宽度根据内容而扩展

另外，该页面在桌面Firefox中显示正常，但在桌面Chrome iPhone仿真开发模式下显示错误：

---

您可以访问

http://productchaseapp.herokuapp.com/articles/list?date=2015-08-21&page=4&range=week&sort=new

要查看效果，只需确保您使用的是移动仿真。

您的第一个选项是

分词属性

p {
   word-break: break-all;
}

但这会将一行末尾的所有单词分开，因此除非您有选择地将其应用于URL

你最好的选择是以下

table {
    table-layout: fixed;
    width: 100%;
}

p {
    word-wrap: break-word;
}

这与预期一样有效，但需要您为非移动布局更改一些其他CSS，因为
表布局：fixed
是一个非常重要的更改。
之所以
word wrap:break word；
不起作用，是因为它只有在其容器强制执行显式宽度时才会进行包装。作为一个实验，
p
并给它显示：block；width:200px；wrap:break word；

现在它可以工作了！但是您可能不想显式地设置

px

宽度，并且您可能想知道它是如何工作的，因为您在其父容器上设置了

width:100%；

。原因是您使用了

table

布局，默认情况下，它会尝试根据其内容调整其宽度。在

表

元素上，为它指定

表布局：固定；

，这样做就可以了

---

仅供参考，

word wrap

在最新标准中被重命名为

overflow wrap

。请参见注释。

word break:break all；

将在任何单词到达边界时立即打断它。这不适合此用例。非常感谢，我没想到它会变得如此复杂