文字超出两行用省略号显示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{
 8             width: 200px;
 9             overflow: hidden;
10             text-overflow: ellipsis;
11             display: -webkit-box;
12             -webkit-line-clamp: 2;
13             -webkit-box-orient: vertical;
14         }
15     </style>
16 </head>
17 <body>
18 <p>就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生
19     就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生
20     就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生
21     就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生</p>
22 </body>
23 </html>

效果图:

注意点:看代码有webkit自然也就chrome支持好,其他浏览器就。。啧啧啧

时间: 2024-12-20 20:25:01

文字超出两行用省略号显示的相关文章

常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis; /* 超出部分显示为... */ 鼠标经过图片放大 .team-img img{ width:188px; height: 200px; border-radius: 50%; transition: all 1.2s; -moz-transition: all 1.2s; -webkit-tr

CSS实现div内文字显示两行,超出两行部分省略号显示

在搭建前台文章列表中,需要实现div内文字显示两行,超出的则省略号显示. 找了很多,都貌似只能一行显示.最后在百度知道找到答案. 答案转自百度知道,题主的自答. 用的是-webkit-私有属性.text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另有回

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli

【转】html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{     display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : cli

text-overflow:ellipsis实现超出隐藏时省略号显示

text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-space:noworp;(强制文字不换行),overflow:hidden;(文字溢出隐藏),一起使用. eg1: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

过长文字自动换行或者超长省略号显示

<div>hghghhgghghghhghghgghghhg</div> css:div{width:100px;} 超长部分省略号显示:/*超出部分不显示*/overflow: hidden;                /*超出部分省略号显示*/text-overflow: ellipsis; 注:如果div中的内容存在空格,则会自动换行 阻止自动换行:white-space: nowrap;

【CSS笔记】使文字在一行显示,超出部分用省略号显示

CSS代码: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 说明: text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出. white-space:nowrap;强制文本在一行内显示. overflow:hidden;溢出内容为隐藏. 必须三者同时用的时候才会实现溢出文本显示省略号 附:多行显示的方法: overflow: hidden; text-overflow: ellipsis;

css——文字超出范围以省略号(...)显示

css部分: overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; width是一个固定宽度. 对于低版本的Firefox,有两种方法解决. 1.使用jQuery ellipsis plugin插件 $(document).ready(function(){ $('.ellipsis').ellipsis(); } 2.使用ellipsis.xml,并与css文件在同一目录下

文字超出两行 则显示。。。

overflow: hidden;    text-overflow: ellipsis;    display: box;    display: -webkit-box;    line-clamp: 2;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;