css DIV中文字换行显示

我会带着你远行 2022-04-04 12:26 429阅读 0赞

![换行显示][20181217134833442.jpg] ![默认显示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70]

**区别**

white-space:normal;
    	word-break:break-all;
    	word-wrap:break-word;

*添加上上边的三句就可以换*行

这三句重点在于:word-break与word-wrap

a:word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>使用浏览器默认的换行规则。</td> 
  </tr> 
  <tr> 
   <td>break-all</td> 
   <td>允许在单词内换行。</td> 
  </tr> 
  <tr> 
   <td>keep-all</td> 
   <td>只能在半角空格或连字符处换行。</td> 
  </tr> 
 </tbody> 
</table>

**b:word-wrap 属性允许长单词或 URL 地址换行到下一行。**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>只在允许的断字点换行（浏览器保持默认处理）</td> 
  </tr> 
  <tr> 
   <td>break-word</td> 
   <td>在长单词或 URL 地址内部进行换行</td> 
  </tr> 
 </tbody> 
</table>

[20181217134833442.jpg]: https://img-blog.csdnimg.cn/20181217134833442.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70]: /images/20220404/69e2ab5b50064515810bd60f00617023.png

发表评论取消回复

表情：

评论列表（有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

相关设置div中文字超出时自动换行

一、对于div强制换行 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 \wrap\{whit

电玩女神/ 2023年10月11日 14:59/ 0 赞/ 116 阅读

相关 css---多行文字显示wenti

显示两行文字多余的文字以省略号显示 overflow: hidden; text-overflow: ellipsis; white-space: n

曾经终败给现在/ 2023年05月29日 13:04/ 0 赞/ 43 阅读

相关页面 CSS样式控制文本 : 强制不换行，文字溢出显示省略号

<style lang="scss" rel="stylesheet/scss"> .xxxx{ whi

小灰灰/ 2023年02月23日 08:11/ 0 赞/ 111 阅读

相关 CSS_css文字超出显示省略号，单行，多行

单行： white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行：

朱雀/ 2022年12月29日 00:25/ 0 赞/ 51 阅读

相关 DIV文字换行并且多余的换成省略号

width: 100px; word-wrap:break-word; text-overflow: ellipsis; display: -w

阳光穿透心脏的1/2处/ 2022年12月12日 13:52/ 0 赞/ 177 阅读

相关文字换行取消行间距

普通文字换行的时候都会造成两端文字中间有一大段间距，现在我根据调节css发现可以不存在该行间距的方法，如图： ![这里写图片描述][SouthEast] 方法：

淡淡的烟草味﹌/ 2022年06月17日 07:16/ 0 赞/ 364 阅读

相关 staruml文字换行

有两种方法开启分词支持第一种在编辑文本的时候在Format菜单中选择“Word Wrap” 在这个组件的属性中找到Format，找到“Word Wrap”选项，

喜欢ヅ旅行/ 2022年06月15日 04:10/ 0 赞/ 1090 阅读

相关 css3文本效果——文字阴影和文字换行

1. 文字阴影：text-shadow text-shadow: h-shadow v-shadow blur color; text-shadow 属性向文本添加

偏执的太偏执、/ 2022年05月08日 22:22/ 0 赞/ 461 阅读

相关 staruml文字换行

有两种方法开启分词支持第一种在编辑文本的时候在Format菜单中选择“Word Wrap” 在这个组件的属性中找到Format，找到“Word Wrap”选项，

曾经终败给现在/ 2022年04月06日 06:40/ 0 赞/ 1121 阅读

相关 css DIV中文字换行显示

![换行显示][20181217134833442.jpg] ![默认显示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

我会带着你远行/ 2022年04月04日 12:26/ 0 赞/ 430 阅读