如何使用HTML5+CSS3属性word-break设置文字换行

在开发系统的过程中,会发现有时界面上一行显示的内容过多,超出了范围占用其他地方,导致页面错乱。在CSS3新加的属性中,有几个属性可以用来控制行内文字换行或者显示省略号。其中,word-break属性可以设置文本内换行,对应常用的属性值有:
(1)break-all:可以在文本内换行,任意断开
(2)break-word:可以在文本内换行
(3)keep-all:不允许换行
(3)normal:可以在文本内换行
下面利用几个实例说明word-break的用法,操作如下:

操作方法

  • 01

    第一步,双击打开HBuilder工具,在Web项目指定目录新建静态页面,并引入相关的CSS和JS文件;在<body>标签插入一个table和一个无序列表,如下图所示:

  • 02

    第二步,打开浏览器,预览该静态页面的效果,可以发现无序列表内容未换行,如下图所示:

  • 03

    第三步,利用CSS3中的选择器,分别设置无序列表中的子项word-break属性,如下图所示:

  • 04

    第四步,再次保存代码并预览该界面,由于给无序列表添加了背景渐变,效果如下图所示:

  • 05

    第五步,查看效果发现没有换行,经过检查发现应该设置无序列表子项的li标签,如下图所示:

  • 06

    第六步,设置完li标签样式,再次查看界面效果,可以看到第一项和第二项文字内容换行了,如下图所示:

(0)

相关推荐

  • 如何使用HTML5+CSS3设置无序列表无标点横向排列

    在CSS3属性中,有属性list-style,可以用来设置无序列表每项前显示图标.无序列表子项前显示小黑圆点,有时根据需求需要去掉这个点:无序列表默认是垂直展示每项,如果做成菜单,需要横向排列.下面利 ...

  • 献给网页设计师的HTML5/CSS3/JS便捷工具

    是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具,HTML5/CSS3几乎成了设网页设计师的必修课,而强大的JS也为网页提供了更多的可能性。尤其是HTML5 ...

  • 七种常见的Word打印设置技巧

    七种常见的Word打印设置技巧 1.打印指定页码 有些时候,我们只希望打印文档中的某些页码,只要点击菜单命令"文件→打印",在打开的"打印"对话框中,选中&qu ...

  • word怎么设置隐藏显示文字呢?

    word中我们需要隐藏一些文字不让别人看到,可以通过字体格式进行设置,当然如果你想看到自己隐藏的文字,你可以设置隐藏的文字为可视状态.下面小编就为大家介绍word怎么设置隐藏显示文字方法,来看看吧! ...

  • word怎么设置上下分栏呢?

    word的分栏功能默认只支持左右分栏,但是想上下分栏的话就不可以,那么我们要实现上下分栏要怎么做呢,下面给你支支招. 步骤: 1.打开word文档,无论什么版本的都可以 2.插入一个文本框,文本框大小 ...

  • Word如何设置表格行高和列宽

    Word是现在十分常用的一款办公软件,有些新用户不知道该软件如何设置表格行高和列宽,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的Word文档,接着选中表格,然后根 ...

  • WORD如何设置文档字体

    office  word是微软公司出版的办公软件,在文档编辑方面功能非常强大实用,而且从之前的低版本,到现在的高版本,在功能和使用上不断地优化改进,是我们实用起来越来越方便,下面就来介绍word如何设 ...

  • word如何设置和添加作者?word作者在哪里?

    我们在使用word编辑文档的时候,有些时候需要添加作者.我们需要先设置好作者,在进行添加,不过有些人连作者的功能在哪里都找不到.现在就通过下面的说明,来教大家word如何设置和添加作者?word作者在 ...

  • word怎么设置字体在表格中的位置?

    word如何设置字体在表格中的位置呢?一起来看看下面的方法 操作方法 01 打开word文档,并在表格中输入文字 02 然后选中刚刚输入的字体,点击右键找到"表格属性"进入 03 ...