css DIV中文字换行显示

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关文字换行取消行间距

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

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

相关 staruml文字换行

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

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

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

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

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

相关 staruml文字换行

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

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

相关 css DIV中文字换行显示

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

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

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

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

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