html怎么控制文字的行数,CSS3属性 line-clamp控制文本行数的使用

说明：限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

今天接到优化需求，帖子列表里的内容要求缩略至3行，并带‘…’省略号

cline-clamp

.box{

width: 200px;

height: 300px;

border:1px solid black;

}

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4; /*设置p元素最大4行，父元素需填写宽度才明显*/

text-overflow: ellipsis;

overflow: hidden;

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

/*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/

word-wrap:break-word;

word-break:break-all;

}

static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，

效果如下：

如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码即可：

word-wrap:break-word;

word-break:break-all;

当然也可以使用插件clamp.js

到此这篇关于CSS3属性 line-clamp控制文本行数的使用的文章就介绍到这了,更多相关CSS3 line-clamp控制行数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

html怎么控制文字的行数,CSS3属性 line-clamp控制文本行数的使用相关推荐

限制文本行数，CSS文本溢出省略号，及兼容火狐
一,css\处理行数溢出隐藏,省略号.....注:此方法不兼容火狐 1.单行隐藏.hhh{ overflow: hidden;/*文本不换行*/white-space: nowrap;/*文字超出用省 ...
纯css控制文字2行显示多余部分隐藏
在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...
java 统计文本行数_统计文本文件的行数，单词书，字节数
[java]代码库import java.io.*; /** * 统计文本文件的行数,单词书,字节数 */ class WordCount { public static int words = 1; ...
linux下统计文本行数的各种方法之命令行统计
文件test1.txt有17行方法一: awk '{print NR}' test1.txt | tail -n1 管道前打印所有行号,管道后则打印最后一行或者: awk 'END{print N ...
文件夹内的文本行数_重温生物信息重要的文本处理命令(实例命令及解释)
linux文本处理命令是一类对文件进行操作的命令,通过使用文本处理命令,可以轻松的对文件进行排序,拆分,合并等操作,熟练掌握文本处理命令,在生物信息文本处理中,有十分重要的意义. 01 cat 查看文 ...
接上一篇Trao文本行数及省略号问题
// 文本过长省略号截断 @mixin ellipsis-text($lineNum) {overflow: hidden;text-overflow: ellipsis;display: -webk ...
在markdown中控制文字的颜色，背景色，字体大小，字体样式及颜色RGB转换工具链接
文章目录 1. 在markdown中控制文字的颜色: 2. 在markdown中控制文字的背景色 3. 在markdown中控制文字的字体大小 4. 在markdown中控制文字的字体样式 5. 另一 ...
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法...
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折 ...
获取字符长度并控制字数和行数（超出显示..., 悬浮显示所有内容）
获取字符长度并控制字数和行数(超出显示-, 悬浮显示所有内容) >'啊覅u发哦啊哦士大夫耨爱你的身份'.length > 16 > '啊覅u发哦啊哦士大夫耨爱你的身份'.slice( ...
JS控制文字只显示两行，超出部分显示省略号
JS控制文字只显示两行,超出部分显示省略号由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jq ...

html怎么控制文字的行数,CSS3属性 line-clamp控制文本行数的使用

html怎么控制文字的行数,CSS3属性 line-clamp控制文本行数的使用相关推荐

最新文章

热门文章