如何用HTML文字换行?


Answers:


240

试试这个:

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

1
我是否误会了CSS3或自动换行?
加布·罗耶

13
它是CSS3,但几乎可以在所有主流浏览器中使用,包括IE5.5-
Jon Hadley

32
自动换行时:断行;尝试断字是行不通的。/ *这是一个杀手* /
redochka

@redochka但是,当word-break: break-all;在普通文本中使用then时,它会在中间打断单词,这很丑。。。我们不能同时使用两种行为吗?
pawamoy

5
重要提示:word-break: break-all,不是word-wrap: break-all。容易犯的错误
Simon_Weaver

58

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

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

大。我尝试使用断字:在Twitter Bootstrap 3面板主体上使用all-break,但从未成功。解决方法是添加空白:normal。
coolboyjules

5
很好,white-space: normal;在它起作用之前我也需要。
radbyx

56

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

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果包含的盒子不够大,或者

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是。


18
但是你怎么知道放在哪里­呢?
Kostas,

您将其用长词写成可能会分开的地方。您甚至可以从合适的字典中自动获取该信息。
Kim Stebel,2011年

4
但是像示例中那样胡言乱语怎么办?可以aaaaaa...aaaaa变成a­a­a­a­a­a­a...a­a­a­a吗?
Kostas,

19
正是我想要的。我喜欢这样做很害羞,直到必须这样做;-)
w00t 2012年

3
如果要包装的单词是overly.long.java.package.name或带有许多点的类似字符串,则此方法很好用。然后您可以添加­ 在每个点之后。
dokaspar

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

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

最好的跨浏览器解决方案是使用服务器端语言(php或其他语言)查找长字符串,并以固定的间隔将其放置在html实体中。​ 该实体很好地打断了长单词,并且可在所有浏览器上使用。

例如

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

8
“在其中定期放置html实体#8203”,但是当您尝试复制文本并将其粘贴到某处时,您将在中间
放置

9

如果单词中没有空格(例如长网址),则唯一可在IE,Firefox,chrome,safari和Opera上运行的代码是:

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

我发现这是防弹的。


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;

6

另一种选择是使用:

div
{
   white-space: pre-line;
}

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


如果你有一个<pre>元素你想拥有自动换行,这个作品和word-breakword-wrap没有。
冥王星

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+ */
}

2

将此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" 

2
我和text-overflow:ellipsis下一个家伙一样喜欢,但这不是对这个问题的正确答案。他希望自动换行,而不是截断溢出。
Spudley

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

这里有更多示例。


0

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


4
如果字符宽度的50倍大于要求的最大200像素,则此解决方案将不起作用。只需使用浏览器的缩放功能,最终您就会发现它破了……
dokaspar 2012年

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


0

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


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

Bootstrap具有text-justify课程,因此您可以使用它代替.wrap-text
barbsan



-2

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

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

14
这与上面的答案相同。何必呢?
trgraglia 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.