css H5端多行文本实现省略号

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  // 这是改变 行数的
-webkit-box-orient: vertical;

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

css H5端多行文本实现省略号相关推荐

CSS —— 单行和多行文本实现省略号
CSS -- 单行和多行文本实现省略号一.单行文本单行文本需要添加固定宽度以兼容部分浏览器,像小程序.微信浏览器等,建议添加. width: 200px; text-overflow: ellip ...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
在实际项目开发中,经常会遇到这样的需求,需要我们把单行或者多行文字溢出时自动显示省略号,今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求. 我们先从最原始的开始,单行文本溢出如何显示省略 ...
CSS单/多行文本溢出省略号
在展示一段简介等场景下,文字内容很长,只想展示一行文字或者两三行文字信息,多余的展示省略号(...),由用户主动点击文字再进入详情页看完整介绍,此时就会用到单/多行文本溢出省略号. 单行文本溢出样 ...
HTML+CSS+移动端前端
HTML+CSS+移动端前端写在前面:本文大部分知识内容来源于B站"黑马前端".写此文仅用于个人记录笔记,除此之外绝无他用. 一.HTML 3.网页开发工具: 3.1VSCode ...
一次失败的尝试，h5+Api 结合 react,webpack,同时生成android 、ios、h5端代码
vue 项目写多了,觉得不能一成不变,想去外面的世界看看.所以尝试了一把react开发,嗯~ o(￣▽￣)o 就在想做一个webApp吧,脚手架也自己搭一个吧.然后脚手架搭建完,项目可以正式开始了,自 ...
h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
uni-app 2.2 发布，大幅度优化 H5 端性能体验 | 技术头条
作者 | uni-app团队责编 | 伍杏玲 uni-app 自发布以来,已经服务了几十万开发者.但让我们意外,有大量开发者用uni-app只编写H5版,并没有多端发布. 这其实也符合uni-app ...
移动端css hover效果,css移动端:acitve效果的实现
做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有& ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...

css H5端多行文本实现省略号

css H5端多行文本实现省略号相关推荐

最新文章

热门文章