css设置文字多余部分显示省略号
如果只显示一行,则可以使用以下方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
如果需要显示多行,在需要设置的元素style中添加以下代码:
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
(注意:有时添加在嵌入样式中不生效,需要添加在行内样式中)

设置前效果:

设置后效果:

css设置文字多余部分显示省略号的更多相关文章
- css设置文字超出部分显示省略号。。。
兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- css如何简单设置文字溢出盒子显示省略号
1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- CSS控制 文字超出部分显示省略号
实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...
- CSS设置文本末行显示省略号...
首先设置文本标签或文字所在标签的宽度 最主要是以下三点: ①white-space:nowrap;如果是中文需要设置行末不断行 ②overflow:hidden;设置控 ...
- css实现文字过长显示省略号的方法
<div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
随机推荐
- 创建ajax的步骤
第1步:创建XMLHttpRequest对象,也就是创建一个异步调用对象. 第2步:创建一个新的HTTP请求,并指定该HTTP请求的方法.URL以及验证信息. 第3步:设置响应HTTP状态变化的函数. ...
- js前端性能优化之函数节流和函数防抖
前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...
- 【vue学习】vue 2.0版本以上创建项目的的步骤
一.环境准备 1.vue项目依赖 node.js npm,需要先安装node和npm,先检查本地是否安装node.npm 快捷键win+r 输入cmd 弹出操作框,如果电脑已经安装git,直接右 ...
- Object.keys方法之详解
在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b' ...
- java(第十五章)
一.字符串类String 1.String是一个类,位于java.lang包中 2.创建一个字符串对象的2种方式: String 变量名=“值”; String 对象名=new String(“值”) ...
- javeEE第二周
XML(可扩展标记语言) 1.什么是xml? 扩展标记语言 XML(Extensible Markup Language) 的规范定义:用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义 ...
- git冲突解决的几种办法
文章目录 git stash 栈 放弃本地修改 撤销分支 强行冲掉之前的分支 删除分支 git stash 栈 git stash git pull git stash pop 当pull出现冲突时 ...
- 输入系统:进程间双向通信(socketpair+binder)
一.双向通信(socketpair) socketpair()函数用于创建一对无名的.相互连接的套接子,如果函数成功,则返回0,创建好的套接字分别是sv[0]和sv[1]:否则返回-1,错误码保存于e ...
- 进制与ASCII码转换
LabeledEdit4.Text := chr(); // 用十进制方式赋值: ASCII码转换为字符 65 -> A LabeledEdit4.Text := #; // 用十进制方式赋值: ...
- PAT B1020
PAT B1020 解决思路 :贪心法,每次选取单价最高的月饼. 先上一个自己错误的解法 #include <cstdio> #include <algorithm> usin ...