css DIV中文字换行显示

我会带着你远行 2022-04-04 12:26 271阅读 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 条评论，271人围观）

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

相关阅读

相关 Python 使 print 中文字换行

换行使用\\n 代码如下 print(" 静夜思 \n窗前明月光\n疑是地上霜\n举头望明月\n低头思故乡") 打印效果如下 ![20210415161650

偏执的太偏执、/ 2023年01月13日 04:06/ 0 赞/ 189 阅读

相关 css控制div的子元素不换行

需求：如题： <div style="white-space:nowrap"> <input type='text' style="display:i

我就是我/ 2022年12月17日 01:17/ 0 赞/ 122 阅读

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

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

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

相关文字换行取消行间距

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

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

相关 staruml文字换行

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

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

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

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

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

相关 CSS自动换行、强制不换行、强制断行、超出显示省略号

CSS样式设置自动换行、强制不换行、强制断行、超出显示省略号 `P`标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果,如下所示,当设置`div`宽度为固定值

爱被打了一巴掌/ 2022年04月25日 09:14/ 0 赞/ 566 阅读

相关 staruml文字换行

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

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

相关 css DIV中文字换行显示

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

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

相关 div 实现长英文字母自动换行CSS

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法最佳CSS定义换行代码 .wrap \{

旧城等待，/ 2021年06月24日 13:59/ 0 赞/ 407 阅读