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. 2.hive里的增删改查

    1.hive的增删改查 查询数据库 hive> show databases; OK default Time taken: 0.254 seconds, Fetched: 1 row(s) h ...

  2. mysql优化建议21条

    转自: http://blog.csdn.net/waferleo/article/details/7179009 今 天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于 ...

  3. python_MySQL 数据库操作

    Python中的mysql操作可以使用MySQLdb模块来完成.它符合Python社区设计的Python Database API SpecificationV2.0标准,所以与其他的数据库操作的AP ...

  4. c# richBox内容转图片

    1.自定义控件,继承richBox public class RichTextBoxPrintCtrl : RichTextBox { //private const double anInch = ...

  5. OOP 1.1 引用

    1.1 引用 1.语法:类型名&引用名=某变量名 e.g. int &b=a; 定义:引用则等价这个变量 引用名的类型是:类型 & 注意事项: ①定义引用时,一定要将其初始化成 ...

  6. 【第四周】psp

    代码累计 300+575+475+353=1603 随笔字数 1700+3000+3785+4210=12695 知识点 QT框架 Myeclipse基础环境 代码复用,封装 Ps技术 在excel画 ...

  7. react-自定义事件

    没有嵌套关系的组件(如兄弟组件)之间的通信,只能通过自定义事件的方式来进行. var EventEmitter = require('events').EventEmitter; import Rea ...

  8. MYSQL-update与select结合使用

    使用 inner join   ) c ,," , iteration; 如上例子: 完成更新 picture.labels 字段 & picture.iteration自增 的两个 ...

  9. 【uoj#282】长度测量鸡 结论题

    题目描述 给出一个长度为 $\frac{n(n+1)}2$ 的直尺,要在 $0$ 和 $\frac{n(n+1)}2$ 之间选择 $n-1$ 个刻度,使得 $1\sim \frac{n(n+1)}2$ ...

  10. Appium自动化测试框架

    1.在utils包中创建一个AppiumUtil类,这个类是对appium api进行封装的. 代码如下: package utils; import java.net.MalformedURLExc ...