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设置超出内 ...
随机推荐
- 使用 requests 模块
官网:http://docs.python-requests.org/en/master/ 请求方式 requests.get() requests.post() requests.put() req ...
- CentOS 中安装和卸载 Emacs
日志更新记录: [1] 增加 CentOS7.2 (内核版本:3.10.0-514.16.1.el7.x86_64)下Emacs25.2 的安装过程,它与本文的步骤完全一样. Emacs 版本:htt ...
- 用HTML+CSS编写一个计科院网站首页的静态网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于以base64编码形式上传图片
第一次用,记录一下 HTML中的样式 HTML代码 1 <li class="orther" style="padding-top: 15px;"> ...
- node.js http接口调试时请求串行特性分析
缘起: 产品业务上有个类数据库服务的请求时间比较长(类似mysql的sql查询),为了优化减少并发时的请求数,做了一个并发时共用请求的优化. 通过单元测试后,想通过手动模拟看下效果,发现优化一直不能生 ...
- apache-jmeter 使用记录
1.显示中文 找到jmeter下的bin目录,打开jmeter.properties 文件将 #language=en 修改为 language=zh_CN以后打开就是中文界面了 2.jmeter报错 ...
- c# Winfrom窗体事件中启用多线程 并用子线程修改窗体里面的属性
昨天一个朋友问我一个问题,需求是 this.textBox1.Text = "睡眠前"; Thread.Sleep(1000); this.textBox1.Text = &quo ...
- Judy Beta 阶段整体计划
Judy Beta 总体规划 经过Alpha阶段的人员变动,Judy组成员如下:Manli Shu, Yuechen Wang, Zhiqi Lin, Yu Xing. 前Alpha阶段PM离职. 人 ...
- 手把手教你如何使用Cocos2d Console 进行html5项目发布
手把手教你如何使用Cocos2d Console 进行html5项目发布 1.首先需要先安装Cocos2d Console运行需要的工具. 详情参见 这篇文章 http://www.cocoach ...
- MySql5.5安装详细说明
双击MySql5.5安装文件开始: next 打勾,Next 选Custom,原因如下面所述: Typical(典型安装) Installs the most common program fea ...