CSS：换行符不会使用太长的行

Question

以下是我遇到的问题： 我的页面的正常视图应如下所示：

但是，有时内容太长，将页面转换为：

HTML只是：

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

我认为原因是这条线太长了。 （url="https://api.soundcloud.com/tracks/223450967"）。我该怎么办？

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

我尝试过：

1. P{word-wrap: break-word;}。它没有用。
2. overflow: hidden，没有工作。我不想要fixed width，因为我想要回应。

我认为问题可能是根据内容扩展outer div的宽度？

此外，该页面在Desktop Firefox中是正常的，但在桌面Chrome iPhone emulation dev mode下是错误的：



您可以访问http://productchaseapp.herokuapp.com/articles/list?date=2015-08-21&page=4&range=week&sort=new查看效果，确保您使用的是移动模拟。

Answer 1

您的第一个选择是word-break属性

p {
   word-break: break-all;
}

但这会打破一行末尾的所有单词，所以除非你有选择地将它应用到网址......

您的更好选择如下。

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

p {
    word-wrap: break-word;
}

这可以按预期工作，但要求您更改非移动布局的其他CSS，因为table-layout: fixed是一个非常重要的更改。