css自动换行加前置_CSS-自动换行一个很长的字符串

CSS-自动换行一个很长的字符串

如何显示带有自动换行符的长字符串，网站地址，单词或符号集，以保持div宽度？ 我猜是一个自动换行。 通常添加空格是可行的，但是是否有CSS解决方案，例如自动换行？

例如，它(非常讨厌)与div重叠，强制水平滚动等。wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以在上面的字符串中添加什么以使其完全适合div中的几行或浏览器窗口？

10个解决方案

86 votes

在此之前已经问过这个问题：

谁解决了我的div-break-breaks-my-div问题？ (提示：不是stackoverflow)

CSS / JS中的自动换行

CSS：如何强制将长字符串(没有任何空格)包裹在XUL和/或HTML中

带有长网址的CSS溢出

长话短说：

就CSS解决方案而言，您可以：​强制元素显示滚动条，­强制剪切任何多余的文本。 有text-overflow:ellipsis;和word-wrap: break-word;，但它们仅是IE(但是CSS3草案中有break-word，所以从现在起这将是这5年的解决方案)。

底线是，如果对您来说非常重要，将文本换行到下一行即可阻止这种情况的发生，则唯一合理的解决方案是注入​(软连字符)，​(分词标签)或​(零- 宽度空间，与字符串服务器端的­减连字符相同)。 但是，如果您不介意Javascript，则可以使用连字符。

Paolo Bergantino answered 2019-09-25T13:28:28Z

31 votes

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

如果浏览器列表中没有FF 2.0，则使用这些解决方案是可行的。 不幸的是，它没有在单词断行的前面加上连字符，这是印刷的噩梦。 我建议使用Paolo所建议的Hyphenator，这是不引人注目的JavaScript。 因此，未启用JavaScript的用户的后备状态将是断字，不带连字符。 我暂时可以忍受。 在CMS中，Web设计人员无法控制要输入的内容，或者在哪里可以实现换行符和软连字符的地方，很可能会出现此问题。

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

Kevin Rapley answered 2019-09-25T13:29:15Z

24 votes

word-break:break-all工作一种

Sam Jones answered 2019-09-25T13:29:48Z

9 votes

刚才在这里提到过，但可能与这个问题更相关。 最好的属性很快就会被溢出包装。 如果实现，那么最好的价值是：

* {

overflow-wrap:hyphenate.

}

在iPhone或Firefox上书写时，似乎还没有得到任何支持，而且溢出草稿：连字符甚至不在工作草案中。

在此期间，我将使用：

p {

word-wrap: break-word;

-moz-hyphens:auto;

-webkit-hyphens:auto;

-o-hyphens:auto;

hyphens:auto;

}

adriatiq answered 2019-09-25T13:30:31Z

3 votes

display: block;

overflow: hidden;

text-overflow: ellipsis;

width: 200px; // or whatever is best for you

jamiethepiper answered 2019-09-25T13:30:53Z

3 votes

我使用代码来防止所有长字符串，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;

Roman Losev answered 2019-09-25T13:31:21Z

2 votes

希望有一天我们可以访问CSS3中的word-wrap属性：Force Wrapping：'word-wrap'属性。

有一天...

Chad Birch answered 2019-09-25T13:31:55Z

1 votes

通常，Cells会自然地执行此操作，但是您可以使用以下命令在div上强制执行此操作：

div {

width: 950px;

word-wrap: break-word;

display: table-cell;

}

nikc answered 2019-09-25T13:32:23Z

0 votes

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

Shraddha Mohite answered 2019-09-25T13:32:50Z

0 votes

看来这可以解决最新版Chrome的问题：

[the element],

[the element] * {

word-wrap: break-word;

white-space: pre;

}

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

SDMulroy answered 2019-09-25T13:33:26Z