使用CSS根据父容器的静态宽度强制一长行文本(没有空格)换行[duplicate]

tuwxkamq 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(140)

此问题在此处已有答案：

10年前关闭了。

可能重复：

CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
我们假设一个有以下代码：

<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>

我很抱歉，但堆栈溢出（根据预览）不换行符的代码片段。
在大多数（？）情况下，以下操作将导致保存长文本行的容器拉伸到其中包含的文本的全宽。
我们想强制这个换行（甚至中间字）根据css指定的宽度（宽度：100 px）的父容器。
这可能通过一个我不知道的css标签吗？
IE6+可比性，加上壁虎/webkit/opera请。

css

来源：https://stackoverflow.com/questions/11599859/forcing-a-long-line-of-text-without-spaces-to-line-break-according-to-parent-c

2条答案

按热度按时间

8cdiaqws1#

现代（CSS3）答案是now works in all browsers：

.wrap {
  overflow-wrap: break-word;
}

注意，您可能需要将overflow:hidden和/或width:100%添加到父元素/祖先元素。
旧答案：

.wrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

赞(0）回复(0）举报 2023-03-09

twh00eeo2#

word-wrap和word-break的组合可以为您解决这个问题。请参阅How to force a line break in a loooooong word in a DIV?（可能重复）

赞(0）回复(0）举报 2023-03-09