带有长 URL 的 CSS 溢出答案

【问题标题】：CSS overflow with long URL带有长 URL 的 CSS 溢出
【发布时间】：2010-10-25 09:41:28
【问题描述】：

好的，我在 160x600 的容器中放置了谷歌广告。新广告在刷新时随机显示。当一个广告弹出一个不包含任何破折号或任何字符的长 URL 时，它会溢出容器 div。现在我有溢出：隐藏，所以在隐藏 160 像素之后的任何东西。问题是，如果有一个长 URL，其中一些会被隐藏（这很好），但广告上方的文本也会被隐藏而不是中断，因为它水平流出到 url。

如何使文本符合并在 160 像素处换行，即使我无法让其下方的 URL 换行？

谢谢！

【问题讨论】：

标签： html css width overflow

【解决方案1】：

对于浏览器which support it,word-wrap:break-word;.

【讨论】：

【解决方案2】：

我认为没有一种干净的 CSS 方法可以解决这个问题：http://www.w3schools.com/Css/pr_pos_overflow.asp

要解决此问题，您可以将 URL 放在其自己的 div 中并将溢出属性设置为隐藏。这将禁止 URL 超出容器，我不确定这是否是您想要的。

如果您使用的是 PHP，我发现这可以使您的文本连字符：

$t = preg_replace("/>(([[:alnum:]]+:\/\/)¦www\.)([^[:space:]]".
"{30,40})([^[:space:]]*)([^[:space:]]{10,20})([[:alnum:]#?\/&=])".
"</", ">\\1\\3...\\5\\6<", $t);

（来自http://www.webmasterworld.com/forum83/5762.htm）

编辑：还有很酷的word-wrap css 属性，但大多数当前浏览器无法处理它。

希望有帮助

另外，这有点像：Using CSS, how can I split a string (e.g. a long URL) in a table cell?

【讨论】：

【解决方案3】：

您始终可以将 URL 放在单独的 DIV 中，然后将该 DIV 的溢出设置为隐藏。

【讨论】：