学习笔记——CSS中word-break与word-wrap属性

「爱情、让人受尽委屈。」 2022-12-22 15:25 11阅读 0赞

--------------------

> 在书写CSS样式时，可能会遇到长文本不换行问题。使用以上两个属性可以解决大部分的问题。

### 1. word-break: ###

> word-break属性规定了自动换行的处理规则。

<view>
        <view class="text" style="width: 250px ">
    	    11111111111,1asdasjdia,sjdioneoen,ee1231112121,,ad,a,sd
    	</view>
    </view>

**1.1 normal：浏览器的默认换行规则**

![20201123190531327.png][]

**1.2 break-all：允许在单词内换行**

**强烈的折行要求，不会产生多余的空白**

![20201123190802246.png][]

**1.3 keep-all：只能在半角空格或连字符处换行。**

![20201123191016782.png][]

### 2.word-wrap: ###

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

** 2.1 normal：浏览器的默认换行规则**

![20201123190605936.png][]

**2.2 break-word：不会把单词拆开换行**

**不太强烈的折行要求，本行放不下的单词会在下一行显示，会产生多余的空白**

![20201123191404317.png][]

--------------------

[20201123190531327.png]: /images/20221120/5cf8e5e2535441d788ad06a6bde45b6c.png
[20201123190802246.png]: /images/20221120/8f0a2fb5c40c4a3ab0dd65e2db77d634.png
[20201123191016782.png]: /images/20221120/bc890331835240a8b31d3434b846292d.png
[20201123190605936.png]: /images/20221120/a22c6cf5149b4cc8b62ccd036300fd0e.png
[20201123191404317.png]: https://img-blog.csdnimg.cn/20201123191404317.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS学习笔记之position属性用法

static > 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index ...

た入场券/ 2024年04月17日 05:32/ 0 赞/ 85 阅读

相关学习笔记——CSS中word-break与word-wrap属性

-------------------- > 在书写CSS样式时，可能会遇到长文本不换行问题。使用以上两个属性可以解决大部分的问题。 1. word-break: >

「爱情、让人受尽委屈。」/ 2022年12月22日 15:25/ 0 赞/ 12 阅读

相关 CSS基础——CSS字体样式属性【学习笔记】

CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font

淩亂°似流年/ 2022年12月22日 11:30/ 0 赞/ 317 阅读

相关 HTML5——CSS学习笔记（15）css3属性

CSS3属性文本阴影属性 text-shadow 说明：水平、垂直阴影的位置允许负值可进行多阴影设置(逗号分隔的方式) 文本换行

快来打我*/ 2022年12月15日 00:57/ 0 赞/ 297 阅读

相关 HTML5——CSS学习笔记（4）CSS属性

CSS属性 > 属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性 > 属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜

末蓝、/ 2022年12月11日 04:24/ 0 赞/ 272 阅读

相关 css 属性学习 -常见属性

属性的作用自我设置：自我形状；在父元素中位置影响其他：父元素影响子元素显示；元素影响兄弟元素显示 1. text-decoration 属性：文本

谁践踏了优雅/ 2022年05月19日 02:08/ 0 赞/ 403 阅读

相关 wordwrap() 函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmd5

以你之姓@/ 2022年03月15日 16:14/ 0 赞/ 85 阅读

相关前端学习笔记(CSS)——常用属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用属性</

Love The Way You Lie/ 2022年03月10日 09:53/ 0 赞/ 302 阅读

相关 css属性学习

Css 层叠样式表 (Cascading Style Sheets)，定义了如何显示HTML元素 \padding不可设置为负值 1.animation 动画

阳光穿透心脏的1/2处/ 2022年01月26日 23:37/ 0 赞/ 385 阅读

相关 CSS学习笔记1-CSS属性

一、什么是CSS属性用下图来解释一下什么是CSS属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

红太狼/ 2021年10月25日 12:09/ 0 赞/ 487 阅读