太原网站建设推广服务,什么是速成网站,专业购物网站建设哪家好,专业网站托管这几天在做项目的时候#xff0c;遇到了比较棘手的问题#xff0c;便是在一个标签里边展示内容#xff0c;如果说展示中文汉字#xff0c;一点问题都没有#xff0c;但是只要连续展示英文字母或者中文的标点符号#xff08;中间不带空格#xff09;#xff0c;那么所渲… 这几天在做项目的时候遇到了比较棘手的问题便是在一个标签里边展示内容如果说展示中文汉字一点问题都没有但是只要连续展示英文字母或者中文的标点符号中间不带空格那么所渲染的内容就不会换行而是超出标签来显示如下图 为了解决让所有的内容都不超出标签的宽度超出后自动换行的问题便找到了word-break这个属性。 word-break的其中有两个值为break-word和break-all下面将对这两个值做一比较 break-word英文单词在一行中所剩下的空间无法放下那么这个单词并不会换行显示而是将这个单词从盒子最大宽度处截开一个单词显示两行前半截在第一行后半截在第二行 break-all英文单词在一行中所剩下的空间无法放下那么这个单词就会换行显示保证单词不会被截断一个单词显示一行 所以解决这个问题的办法就是在这个盒子上添加一个属性word-breakbreak-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
