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设置超出内 ...
随机推荐
- WinDbg调试 C# dmp
WinDbg C#调试 打开windbg,加载需要调试的c# dmp. 设置好sympath等. 查看蹦会的c#主进程依赖的.Net环境 可以查看进程名对应的*.config文件. 开始加载符号,假设 ...
- python 做接口自动化测试框架设计
1,明确什么叫自动化测试,什么叫接口自动化测试,如何设计接口测试用例,已登录为例 自动化测试:解放人力来自动完成规定的测试. 自动化测试分层模型:UI层,不论WEB端还是移动端,都是基于页面元素的识别 ...
- laravle 整合 thrift
1,安装thrift https://www.cnblogs.com/sunlong88/p/9965522.html 2,生成 RPC文件 thrift -r --out ./app --gen p ...
- css属性应用bug大杂烩(后续继续更新)
一.Flex布局使用时的坑: 1.常见的左右分布的flex布局中,左侧给定宽度,右侧占满剩余空间,但当右侧中文字内容很多时,会挤占左侧空间,时左侧不能按照定宽显示. <style> .fa ...
- jenkins log文件突然占满磁盘空间
今天早上同事反应jenkins构建job发生异常,于是登录机器查看发现磁盘空间已满.进一步排查之后发现jenkins的catalina.out文件已占满磁盘空间. 用tail看了下日志后面都是关于DN ...
- linux服务器用nginx做网站内页之间301的跳转方法
例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...
- ie11~ie9兼容的布局写法。bootsteap的12栅格,栅格化就可以实现。
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- Jmeter之正则表达式提取器应用
说到Jmeter正则表达式提取器的应用,就不得不说到关联.所谓关联,就是把应用中动态变化返回的数据获取到,把它保存为一个参数,提供给后面需要用到的地方进行使用. Jmeter中关联是通过“添加—后置处 ...
- 记录Linux CentOS 7系统完整部署Docker容器环境教程
笔者之前有在"详细介绍Ubuntu 16.04系统环境安装Docker CE容器的过程"文章中有介绍到利用Ubuntu系统安装Docker容器环境的过程.如果我们有使用CentOS ...
- 九州动态ip的特色
九州代理是一款高覆盖的换ip软件,范围可覆盖全国160多个城市.软件可用于游戏试玩.游戏挂机.营销.优化.文档分享.管理.问答推广.数据采集.点赞.增效回访.用户注册等.“九州代理”仅提供国内网络节点 ...