限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
display: -webkit-box必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
方法和详细的操作步骤如下:
1、第一步,打开html编辑器并创建一个新的html文件,例如:index.html,见下图,转到下面的步骤。
2、第二步,完成上述步骤后,在index.html中的<style>标记中,输入CSS代码,见下图,转到下面的步骤。
3、第三步,执行完上面的操作之后,浏览器运行index.html页面。
如果此时文本超过2行,则多余的部分将自动显示为省略号,见下图。这样,就解决了这个问题了。
1、新建一个html页面。
2、在html代码页面找到<body>标签,在<body>标签里创建一个<p>标签,然后输入显示的内容并添加一个class类为 class="cont"。
3、找到<title>标签,在这个标签下面创建一个<style>标签,在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden/*内容超出后隐藏*/}</style>。
4、为cont类添加内容显示为一行:white-space: nowrap,内容超出后显示为省略号:text-overflow: ellipsis。
5、保存好代码后使用浏览器查看效果。