word-break属性和css换行显示

　　这几天在做项目的时候，遇到了比较棘手的问题，便是在一个标签里边展示内容，如果说展示中文汉字，一点问题都没有，但是只要连续展示英文字母或者中文的标点符号（中间不带空格），那么所渲染的内容就不会换行，而是超出标签来显示，如下图：

　　为了解决让所有的内容都不超出标签的宽度，超出后自动换行的问题，便找到了word-break这个属性。

　　　　word-break的其中有两个值为break-word和break-all，下面将对这两个值做一比较：

　　　　　　break-word：英文单词在一行中所剩下的空间无法放下，那么这个单词并不会换行显示，而是将这个单词从盒子最大宽度处截开（一个单词显示两行，前半截在第一行，后半截在第二行）；

　　　　　　break-all：英文单词在一行中所剩下的空间无法放下，那么这个单词就会换行显示，保证单词不会被截断（一个单词显示一行）

　　所以解决这个问题的办法就是在这个盒子上添加一个属性word-break：break-word;就能搞定。

　　单行或多行容纳不下内容显示...less样式

/*单行溢出*/
.one_txt_cut() {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt_cut(@num:2) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: @num;-webkit-box-orient: vertical;
}

更多专业前端知识，请上【猿2048】www.mk2048.com

word-break属性和css换行显示相关推荐

css换行显示省略号
css换行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* 可以显示的行数,超出部分用...表示*/ -web ...
java word模板替换多行_java poi word模板替换段落的换行显示
在poi操作word模板进行数据替换时,会存在替换的段落需要换行的情况,由于传入的都是字符串,之前在网上搜索过一些处理方法都没有效果,如给字符串添加:"\r","\r\n ...
css如何让文字不换行,css如何让文字不换行显示？
在CSS中,可以通过white-space属性来实现文字不换行显示:只要将white-space属性的值为nowrap就可强制文字不换行. white-space属性指定元素内的空白怎样处理.它有以下 ...
html中如何div转换下一行,css如何让两个div不换行显示？
css如何让两个div不换行显示?让两个div并列显示?下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法,希望对大家有所帮助. 在HTML中,div是块状元素,div盒子本身默 ...
word长公式不换行显示的方法
版本:Office 专业版 2016 在Word编辑文档的时候,有时候用Mathtype输入较长的公式,会自动换行,比如: 自动分成了两行如果改成内嵌: 对于中等长度的公式可以压缩至一行显示,但对于 ...
css 标签显示模型盒子模型浮动背景属性
标签显示模式(display) 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 常见的块元素有< ...
absolute元素在text-align属性下的对齐显示
1. absolute元素是否可以响应text-align属性? 众所周知,text-align属性可以有效作用于inline/inline-block水平的元素,那么应用了position:absl ...
poi 替换word里的\n 变成换行
需求 poi库,将word里的\n变成换行,这样才能把数据库里有换行的数据原样复制到word里,使用了run.addCarriageReturn();回车符,但是不起作用,所以用的是run.addBr ...
css属性和属性值，溢出属性，css盒子
1.css属性和属性值 1.css文本属性 1. font-size 字体大小单位是px,浏览器默认的是16px,设计图常用的是12px 2. font-family 字体当字体是中文字体,英文字 ...

word-break属性和css换行显示

word-break属性和css换行显示相关推荐

最新文章

热门文章