一个很长的字符串

如何使用自动换行来显示长字符串、网站地址、单词或一组符号以保持 div 宽度？我猜是某种文字包装。通常添加一个空格是可行的，但是是否有像文字包装这样的 CSS 解决方案？

例如，它(非常讨厌)重叠 div，迫使水平滚动等。 Wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以在上面的字符串中添加什么内容，以便在 div 中的几行内或者在浏览器窗口中能够很好地适应它？

98103 次浏览
小开
最佳答案

以前也有人问过这个问题:

长话短说:

至于 CSS 解决方案，你有: overflow: scroll;强制元素显示滚动条和 overflow:hidden;只是削减任何额外的文本。有 text-overflow:ellipsis;和 word-wrap: break-word;，但他们只是 IE (break-word是在 CSS3草案，但是，所以它将是解决这5年从现在开始)。

底线是，如果阻止这种情况发生非常重要，将文本包装到下一行，唯一合理的解决方案是在字符串服务器端注入 &shy;(软连字符)、 <wbr>(断字标记)或 &#8203;(零宽空格，与 &shy;减去连字符的效果相同)。不过，如果你不介意 Javascript 的话，还有一个 连字符看起来相当不错。

小开

希望有一天我们能够访问 CSS3: 强制包装: “单词包装”属性中的 word-wrap属性。

总有一天..。

小开

word-wrap: break-word;支持 IE7 + 、 FF 3.5和启用 Webkit 的浏览器(Safari/Chrome 等)。要处理 IE6，您还需要声明 word-wrap: break-all;

如果你的浏览器矩阵中没有 FF 2.0，那么使用这些是一个可行的解决方案。不幸的是，它没有连字符前一行的单词是破碎的，这是一个排印噩梦。我建议使用保罗建议的连字 Unobtrusive JavaScript。对于没有启用 JavaScript 的用户来说，后退将是没有连字符的断字。我暂时可以接受。这个问题最有可能出现在 CMS 中，在这里网页设计师无法控制输入什么内容，或者在哪里可以实现换行符和软连字符。

我看了一下 W3规范，其中讨论了 CSS3中的连字符。不幸的是，似乎有一些建议，但没有具体的。看起来浏览器供应商还没有实现任何东西。我已经检查了 Mozilla 和 Webkit 的专有代码，但是没有任何迹象。

小开

刚刚在 给你上提到了这一点，但可能与这个问题更相关。不久，最好的属性将是溢出包装。如果得到实施，最大的价值将是:

* {
overflow-wrap:hyphenate.
}

在编写 iphone 或者 firefox 的时候，它似乎还没有得到任何支持，溢出包装: 连字符甚至还没有出现在工作草案中。

与此同时，我会用:

p {
word-wrap: break-word;
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
小开

正常情况下，Cell 会自然地执行这个操作，但是你可以通过以下方法强制 div 执行这个操作:

div {
width: 950px;
word-wrap: break-word;
display: table-cell;
}
小开 
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you
小开

word-break:break-all是个好东西

小开

我使用这个代码来防止所有的长字符串、 url 等等。

 -ms-word-break: break-all;


/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;


/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
小开

始终指定 line-height 属性-如果不指定，可能会导致 word-break: break-all;属性失败。

小开

这似乎为最新的 Chrome 做到了这一点:

[the element],
[the element] * {
word-wrap: break-word;
white-space: pre;
}

除了 Chrome，我没有查看任何浏览器。

小开

使用 word-wrap: break-word。

div {
font-family: monospace;
border: 1px solid red;
width: 300px;
}
.wrap-me {
word-wrap: break-word;
color: red;
}
<div>
<p>
https://one.two.three.four.five.com/this/is/a/really/long/link/which/overflows
</p>
<p class="wrap-me">
https://one.two.three.four.five.com/this/is/a/really/long/link/which/wraps
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat dui, fringilla sit amet semper ut, tristique ut nulla. Sed turpis quam, tincidunt ac pellentesque eu, tristique nec elit. Nam placerat vitae nisi in blandit. Quisque magna purus, facilisis rhoncus pulvinar in, pretium id magna. Aenean magna arcu, maximus eu metus sit amet, tempor laoreet turpis. In consectetur, purus in laoreet laoreet, odio nisi hendrerit erat, et blandit lectus augue et massa. Vestibulum non mauris consectetur, elementum urna vitae, convallis tellus. Vivamus vehicula interdum ligula eu tempus. Nunc accumsan semper sem, sed vestibulum tortor porttitor vulputate. Nam efficitur turpis a justo consectetur dignissim. Integer justo elit, bibendum et neque eget, porttitor lobortis elit. Etiam scelerisque risus quam, non suscipit odio varius id. Curabitur magna purus, pellentesque ut vehicula non, viverra in turpis. Integer sollicitudin suscipit augue id accumsan. Fusce condimentum nisi non suscipit auctor. Integer luctus odio id purus gravida iaculis.
</p>
</div>


提交答案