admin 管理员组

文章数量: 1184232

知识点

 

文字超出单行不换行，显示省略号

.word {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;   --------------- 单词不换行word-wrap: break-word; --------------- 整个单词换行word-break: break-all; --------------- 单词内换行 (单行显示省略号，后面两个属性可以不加)
}

文章超出多行出现省略号...

overflow: hidden;
text-overflow: ellipsis; 
display: -webkit-box;    // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-line-clamp: 2;   // 用来限制在一个块元素显示的文本的行数 ============这里指的是要实现对应number的行数，实现多行的关键点
-webkit-box-orient: vertical;  // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。英文单词时：
word-wrap:break-word; --- word-wrap: 属性允许长单词或URL地址换行到下一行, break-word: 单词内换行
word-break:break-all;  ------------------ word-break: 规定自动换行的处理方式，break-all: 允许单词内换行总结：
word-wrap: break-word；  ------------ 整个单词换行
word-break: break-all;   ------------ 单词内换行
white-space: nowrap;     ------------ 单词不换行

 跨浏览器兼容的方案 点击跳转到对应原文

兼容写法1：css写法p {position:relative;line-height:1.4em;/* 3 times the line-height to show 3 lines */height:4.2em;overflow:hidden;
}
p::after {content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 20px 1px 45px;background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

 

本文标签： 知识点

版权声明：本文标题：知识点 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1694084816a250234.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。