203

如何包装超过（比如说）aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa宽度的文本？div200px

我对任何类型的解决方案都持开放态度，例如 CSS、jQuery 等。

4

19 回答 19

261

尝试这个：

div {
    width: 200px;
    word-wrap: break-word;
}
于 2009-07-18T16:02:12.810 回答
64

在引导程序 3 上，确保空白未设置为“nowrap”。

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}
于 2013-11-12T08:39:05.457 回答
58

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

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果包含框不够大，或者

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是。

于 2009-07-18T16:13:37.843 回答
29 
div {
    /* Set a width for element */
    word-wrap: break-word
}

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

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

例如

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
于 2009-07-18T16:14:16.517 回答
9

如果单词中没有空格（例如长 URL），则唯一适用于 IE、Firefox、chrome、safari 和 opera 的方法是：

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

我发现这是防弹的。

于 2013-04-12T13:56:53.610 回答
9

这对我有用

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;
于 2016-06-02T02:04:45.360 回答
7

另一种选择也是使用：

div
{
   white-space: pre-line;
}

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

于 2014-10-14T15:59:54.680 回答
4

跨浏览器

.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+ */
}
于 2015-04-20T09:21:16.873 回答
1

CSS技巧的例子：

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

更多例子在这里。

于 2015-02-04T10:01:05.830 回答
1

将此 CSS 添加到段落中。

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;
于 2012-05-23T09:53:54.793 回答
1

在 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;
于 2016-02-06T17:06:16.393 回答
1 
<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>
于 2020-10-01T20:23:46.927 回答
0

尝试这个

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: ellipsis add ... 和 line-clamp 显示行数。

于 2014-11-27T21:10:24.250 回答
0

我用过引导程序。我的 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;
}
于 2018-09-18T02:24:14.280 回答
0

你可以使用这个CSS

p {
  width: min-content;
  min-width: 100%;
}
于 2019-12-27T10:22:58.187 回答
-1

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

于 2012-01-23T07:31:09.410 回答
-1

尝试这个

div {display: inline;}
于 2018-07-18T16:58:31.027 回答
-2

尝试：

overflow-wrap: break-word;
于 2020-01-29T03:00:32.457 回答
-3

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

width: 200px;
word-wrap: break-word;
于 2011-01-27T08:36:26.430 回答