CSS文字溢出部分自动用"..."代替

如html部分：

<h4>&lt;马尔代夫双鱼岛Olhuveli4 晚6 日自助游&gt;</h4>

<p>上海出发，机+酒包含:早晚餐+快艇</p>

CSS样式

#tour h4{

    white-space: nowrap; /*文本不换行*/

    overflow: hidden;  /*溢出部分隐藏*/

    text-overflow: ellipsis; /*溢出部分用"..."代替*/

}

#tour p{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

当页面缩至一定大小时，效果如下：

CSS文字溢出部分自动用"..."代替的更多相关文章

  1. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  2. CSS文字溢出处理问题

    单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...

  3. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  4. css文字溢出隐藏，及强制断句

    只显示一行文字,便溢出隐藏 text-overflow: ellipsis; white-place: nowrap; overflow: hidden; 显示 n 行文字后便溢出隐藏  displa ...

  5. css文字动画（自动换文字）

    html: <div class="content"> <div class="content__container"> <p c ...

  6. css 文字溢出隐藏 带省略号

    .demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置

  7. 小程序 css 文字溢出，长度过长用 。。。

    word-break: break-all;/*允许在单词内换行*/ text-align: left; /* line-height: 45rpx; */ text-overflow: -o-ell ...

  8. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  9. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

随机推荐

  1. zabbix监控历史数据清理

    2018/12/24 14:00:57  zabbix监控运行一段时间以后,会留下大量的历史监控数据,zabbix数据库一直在增大:可能会造成系统性能下降,查看历史数据室查询速度缓慢. zabbix里 ...

  2. 微软职位内部推荐-Senior Software Engineer II-Sharepoint

    微软近期Open的职位: SharePoint is a multi-billion dollar enterprise business that has grown from an on-prem ...

  3. 用 Python 构建一个极小的区块链

    虽然有些人认为区块链是一个早晚会出现问题的解决方案,但是毫无疑问,这个创新技术是一个计算机技术上的奇迹.那么,究竟什么是区块链呢? 区块链 以比特币(Bitcoin)或其它加密货币按时间顺序公开地记录 ...

  4. linux中使用wget设置参数防止中文乱码问题

    在linux中一般会用到wget命令来请求远程的某个文件,此时,文件中会有一些中文字符或者中文汉字,要保持不出现"乱码"就需要在后面加上参数,如下图所示: 其中的 --restri ...

  5. 如何使用HtmlTestRunner让自动化测试报告内容更丰富

    原文出自:http://www.cnblogs.com/tsbc/p/4128150.html 简述 使用selenium webdriver + Python做自动化测试,执行完成后要生成测试报告, ...

  6. 解决：Invalid character found in the request target.The valid characters are defined in RFC 7230 and RFC3986

    目录 背景 原因分析 处理方法 参考 背景 在将tomcat升级到7.0.81版后,发现系统的有些功能不能使用了,查询日志发现是有些地址直接被tomcat认为存在不合法字符,返回HTTP 400错误响 ...

  7. 1st 构建之法读后感

    构建之法读后感 由于时间和书的篇幅所限,所以我没能真正通读全书,只通过网上的介绍和书内前言及目录,大概了解了构建之法是一本怎样的一本书. 这本书是由具有长达20年一线软件开发经验的邹欣老师所撰写,他以 ...

  8. c#中,字符串前加@是什么意思

    让转移字符"\"保持原意,不要转义,如一个地址字符串string path="c:\abc\";默认的"\"是作为转义来使用的,而不是一个真 ...

  9. 【C++】深度探索C++对象模型读书笔记--执行期语意学（Runtime Semantics)

    对象的构造和析构: 全局对象 C++程序中所有的global objects都被放置在程序的data segment中.如果显式指定给它一个值,此object将以此值为初值.否则object所配置到的 ...

  10. IDEA使用switch传入String编译不通过

    今天在使用IDEA的时候,用到switch分支语句,传入String参数的时候一直报错,下面是源码报错截图: 看错误提示并没有提到switch支持String类型,不过ava1.7之后就支持Strin ...