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设置超出内 ...
随机推荐
- JavaScript判断苹果 iPhone X Series 机型
原文链接: JavaScript 判断 iPhone X Series 机型 现状 iPhone X 底部是需要预留 34px 的安全距离,需要在代码中进行兼容. 现状对于 iPhone X 的判断基 ...
- Vue2.0使用vue-cli脚手架搭建
一:安装node.js Node.js官网:https://nodejs.org/en/download/ 选择相应的版本即可安装 通过node自带的npm包管理工具 二.安装依赖 安装依赖:npm ...
- 关于a标签的用法总结
onclick的事件被先执行 ,其次是href中定义的(页面跳转或者javascript) 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加 ...
- python--网络编程urllib
一.python操作网络也就是打开一个网站,或者请求一个http接口,使用urllib模块.urllib模块是一个标准模块,直接import urllib即可 from urllib import r ...
- ZedBoard前期准备工作
1. 资源下载 内核:https://github.com/Xilinx/linux-xlnx/releases uboot:https://github.com/Xilinx/u-boot-xlnx ...
- Element.scrollIntoView()
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); element.scrollIntoView( ...
- 基于thinkphp的后台管理系统模板快速搭建
当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一个,这几天由于工作上的安排,需要去研究一下thinkcmf的后台管理系统, ...
- Win10系列:C#应用控件进阶6
路径 路径(Path)可以用来定义任意形状的曲线和几何图形,当然这种任意性也带来了复杂性.为了方便的绘制几何图形,微软在Visual Studio 2012安装包中为程序开发者提供了免费的Blend ...
- JavaScript热身练习1
把某个元素移出你的视线: 1.display:none:(显示为无,不占地) 2.visibility:hidden:(隐藏,占地) 3.宽或者高设置为零 4.透明度设置 5.left/top (定位 ...
- Promise 错误处理
Promise 是一个异步返回单个结果的函数或方法 不使用 `catch()` 时,在 `success handler` 里的错误无法被捕捉到 使用 `catch()` 时,在 `succe ...