Question

如何将aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa之类的文字超出div的宽度（比如说200px）？

我对CSS，jQuery等任何解决方案持开放态度。

Answer 1

试试这个：

div {
    width: 200px;
    word-wrap: break-word;
}

Answer 2

在bootstrap 3上，确保空白区域未设置为“nowrap”。

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Answer 3

您可以像这样使用软连字符：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果包含的框不够大，或

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是。

Answer 4

   div {
    // set a width
    word-wrap: break-word
}

“word-wrap”解决方案仅适用于支持CSS3的IE和浏览器。

最好的跨浏览器解决方案是使用您的服务器端语言（php或其他）来定位长字符串并定期在其中放置html实体 这个实体很好地打破了长词，适用于所有浏览器。

e.g。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#8203;aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Answer 5

如果单词中没有空格（例如长URL），唯一可以在IE，Firefox，chrome，safari和opera中使用的是：

div{
    width: 200px;  
    word-break: break-all;
}

我发现这是防弹的。

Answer 6

这对我有用

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Answer 7

另一种选择也是使用：

div
{
   white-space: pre-line;
}

这将在所有支持 CSS1 的浏览器中设置所有div元素（这几乎是所有常见的浏览器，可以追溯到IE 8）

Answer 8

Cross Browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 9

将此CSS添加到段落中。

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left"

Answer 10

试试这个

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

属性text-overflow：省略号add ...和line-clamp显示行数。

Answer 11

您可以使用此 CSS

p {
  width: min-content;
  min-width: 100%;
}

Answer 12

我用过引导程序。我的html代码看起来像..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

Answer 13

尝试

div {display: inline;}

Answer 14

在HTML正文中试试：

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

在CSS正文中试试：

background-size: auto;

table-layout: fixed;

Answer 15

来自CSS Tricks的示例：

div {
    -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;
}

更多示例here。

Answer 16

适用于我的服务器端解决方案是：$message = wordwrap($message, 50, "<br>", true);其中$message是一个字符串变量，包含要分解的单词/字符。 50是任何给定段的最大长度，"<br>"是您希望每（50）个字符插入的文本。

Answer 17

尝试：

overflow-wrap: break-word;

Answer 18

<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

Answer 19

使用word-wrap:break-word属性以及所需的宽度。主要是，放 以像素为单位的宽度，而不是百分比。

width: 200px;
word-wrap: break-word;

如何在HTML中自动换行文字？

19 个答案: