使用css3属性处理单词的换行和断词

  • 问题呈现
<div class="main">
Nameofuser-definedcallbackfunctiontobecalledwheneverastreamtriggersanotification. 
</div>
<style type="text/css">
.main{
    width: 100px;
    border: 2px solid red;
}
</style>

默认情况下,连续的单词如果在一行容纳不下的话会在空格和连字符处换行,那如何让它换行呢?

  • 认识word-break属性

属性值

解释

normal

使用浏览器默认的换行规则(默认)

break-all

允许在单词内换行

keep-all

只能在半角空格或连字符处换行

现在大多说的浏览器默认的换行规则为半角空格和连字符,因此normal和keep-all的效果是一样的。

  • word-break: break-all
<style type="text/css">
.main{
    width: 100px;
    border: 2px solid red;
        word-break: break-all;
}
</style>

word-break: break-all,打破了默认的换行规则。那如果想保留空格和连字符处换行怎么办?

  • 认识word-wrap属性

属性值

解释

normal

使用浏览器默认的换行规则(默认)

break-word

长单词进行换行

下来看一下演示,我把单词内部插入了几个空格

  • 先看默认的,以作对比。我把长单词多插入了几个空格,以便效果明显
<div class="main">
    Name of user-definedcallbackfunction to be called wheneverastreamtriggersanotification. 
</div>
<style type="text/css">
.main{
    width: 100px;
    border: 2px solid red;
}
</style>

默认情况下,图上标号2和4是连续长单词,中间没有空格和连字符,所以没有换行(溢出)。

  • 下来看看word-wrap: break-word演示
<style type="text/css">
.main{
    width: 100px;
    border: 2px solid red;
    word-wrap: break-word;
}
</style>

从图上看,保留了空格和连字符的换行状态。只是将前面图上标号2和4行的长单词进行了换行。

总结

  • word-break: break-all, 打破了浏览器的默认换行规则
  • word-wrap: break-word, 保留浏览器的默认换行规则,一旦一个连续长单词一行容纳不下,就只对这个长单词进行打破换行

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

1969
来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

1043
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1859
来自专栏前端大白专栏

关于css选择器的问题 + * ~这三个有什么区别

1754
来自专栏程序员的知识天地

H5学习从0到1-H5的块标签的使用(9)

703
来自专栏小狼的世界

CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

912
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4039
来自专栏前端知识分享

第26天:js-$id函数、焦点事件

一、函数return语句 定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值。同时,终止代码的执行。 所有自定义函数默认没有返回值...

1071
来自专栏HTML5学堂

一个setInterval的小问题

一个setInterval的小问题 HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停...

3589
来自专栏Android先生

Android开发人员不得不学习的Vue.js基础

Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

1372

扫码关注云+社区

领取腾讯云代金券