CSS设置超过两行或者单行显示...

html-css07

CSS设置超过两行或者单行显示...,第1张

overflow: hidden

text-overflow: ellipsis// text-overflow css3的属性，当文本溢出时，显示省略号

display: -webkit-box

-webkit-line-clamp: 2// 设置两行文字溢出

-webkit-box-orient: vertical

overflow:hidden

text-overflow:ellipsis

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、保存好代码后使用浏览器查看效果。