Question

因此，经过几个小时的搜索，我无法找到解决此问题的简单方法。我经营一个网站，我的自学HTML和CSS编码非常有限。我的网站以Wordpress为基础，在发帖时，我们有时会输入长URL。通常，这些长URL扩展到实际帖子的边界之外，并推入侧边栏小部件，甚至有时会扩展整个页面，以便有一个滚动条。就像我说我的编码知识相对有限，我正在寻找一个简单的解决方案来快速解决这个问题。我不想用很长时间的方式去做，因为我可能每天都要实施它们。请让我知道您对解决方案的看法。我已经阅读了一些关于自动换行的内容，但我只是没有理解它。请知道他们正在做什么的人用术语中的HTML解释这个解决方案，任何人都能理解。

提前致谢。

Answer 1

这里有一些你可以做的事情，以及它们会产生什么影响：

http://jsfiddle.net/fW5bF/

在第一种情况下，段落具有设置宽度，但内容太长，因此它的高度会扩展为包含所有文本。请注意，文本被分成白色空格所在的单独行。
在第二种情况下，我使用white-space: nowrap;来防止文本被分成多行。这会导致文本溢出段落元素的边界。
然后我使用overflow: hidden;隐藏此溢出。
然后我使用text-overflow: ellipsis;包含省略号，表示有更多文字，但我们用尽了空间来显示它。
现在我们有一个很长的'字'（例如URL），因此没有空白区域。因此，默认情况下，它只会溢出它的容器。
您可以使用word-wrap: break-word;将单个“字”拆分为多行。
或者，您可以使用overflow: hidden;隐藏溢出，text-overflow: ellipsis;包含省略号。

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

Answer 2

css规则“word-wrap：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;
}

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

3 个答案: