利用CSS3 word-break 属性实现文字强制换行效果

2024-05-10 11:54:45

实例

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

实例：

<!DOCTYPE html>

<html>

<head>

<style>

p.test1

{

width:11em;

border:1px solid #000000;

word-break:hyphenate;

}

p.test2

{

width:11em;

border:1px solid #000000;

word-break:break-all;

}

</style>

</head>

<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>

</body>

</html>

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 word-break 属性。

定义和用法

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

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

默认值：	normal
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordBreak="keep-all"

语法

word-break: normal|break-all|keep-all;

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

利用CSS3 word-break 属性实现文字强制换行效果相关推荐

黑色白色文字阴影HTML,利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
利用CSS3的transition属性模仿鼠标移入闪光灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
html js清除画布文字,利用canvas的fillText属性绘制文字并实现居中和清空画布
利用 canvas 画一个圆环,然后再里面绘制文字,实现居中显示. 首先写一个 canvas 容器: JS部分: 其实上半部分是绘制圆环,最后 8 行才是文字部分,可以设置字体样式.颜色.是否居中等. ...
css3 transition transform属性造成文字抖动
现象:信息栏第一行文字,最后总会抖动代码: .match .match-item{width: 200px;height: 300px;display: inline-block;margin: 0 ...
利用css3实现jQuery中的slideDown和slideUp效果
最开始想要实现一个菜单从上向下滑出的效果,采用transition: translate 0.5s ease-in;总是觉得别扭的很,无意间看到小米官网的二级菜单从上向下滑出的效果,顿时觉得这样就不会 ...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...
span文字强制换行
.halfYear{ background-color: #FC960B; display: block; width: 44px; height: 44px; padding: 5px 4px; l ...
html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...
html强制不换行标签,css如何设置文字强制不换行？
css可以使用white-space属性设置文字强制不换行,通常我们使用white-space:nowrap强制文本文字内容不换行,在对象内一行显示完所有文字内容. css可以使用white-spac ...

最新文章

热门文章