CSS显示两行或三行文字,然后多出的部分省略号代替

html-css013

CSS显示两行或三行文字,然后多出的部分省略号代替,第1张

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

限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的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、保存好代码后使用浏览器查看效果。