换行符和/或隐藏长URL的溢出

Question

所以经过数小时的搜索，我找不到这个问题的简单解决方案。我经营着一个网站，我自学的HTML和CSS编码非常有限。我的网站以Wordpress为基础，在发布帖子时，有时我们会放很长的URL。通常情况下，这些长URL会扩展到实际帖子的边界之外，并推入侧边栏小部件，有时甚至会扩展整个页面，从而出现滚动条。正如我所说，我对编码的了解相对有限，我正在寻找一个简单的解决方案来快速解决这个问题。我不想用一种旷日持久的方法来做这件事，因为我可能每天都要执行它们。所以让我知道你对解决方案的看法。我读过一些关于单词换行的文章，但我只是不太理解。请知道他们在做什么的人用任何人都能理解的术语解释使用HTML的解决方案。

提前谢谢。

Answer 1

下面我们来看看你可以做的一些事情，以及它们会产生什么影响：

http://jsfiddle.net/fW5bF/

1. 在第一种情况下，段落有一个固定的宽度，但内容太长，因此它的高度会扩展到包含所有文本。请注意，文本在空白处被分解为单独的行
2. 在第二种情况下，我使用了white-space: nowrap;来防止文本被分解为多行。这会导致文本溢出段落元素的边界
3. 然后我使用overflow: hidden;隐藏这个溢出
4. 然后我使用text-overflow: ellipsis;来包含省略号，表示有更多的文本，但我们没有足够的空间来显示它
5. 现在我们有一个非常长的"单词"(如URL)，因此没有空白。因此，默认情况下，它只是溢出它的容器
6. 您可以使用word-wrap: break-word;将单个"单词"分解为多行
7. 或者，您可以使用overflow: hidden;来隐藏溢出，使用text-overflow: ellipsis;来包含省略号

我建议您在MDN这样的参考网站上查找所有这些属性：https://developer.mozilla.org/en-US/docs/Web/CSS

Answer 2

css规则"word wrappe:break-word"应该满足您的需求。

这是一把小提琴：http://jsfiddle.net/9AZtx/使用：

p 
{ 
outline:1px solid #ccc; 
width:20em; 
word-wrap:break-word; 
}

Answer 3

您可以使用text-overflow: ellipsis:

.element {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}