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. 微软职位内部推荐-Principal Development Lead - SharePoint

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

  2. Linux学习——操作文件与目录

    1. ls:列出文件及目录信息. 命令格式:ls [选项] ... 常用选项: -a 显示指定目录下所有子目录与文件,包括隐藏文件. -A 显示指定目录下所有子目录与文件,包括隐藏文件.但不列出“.” ...

  3. 团队Alpha冲刺（八）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  4. OA--对于每个form表单(<s:iterator>生成)的处理

    由于是后台传过来的,我们不知道form 有几个 也不能指定form的id和name,(其实也可以就是可能会冲突我们还是用下面讲的方法把) 之前有想过 对于每个form 里面都有一些参数,举个例子 项目 ...

  5. HDU 5434 Peace small elephant 状压dp+矩阵快速幂

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5434 Peace small elephant  Accepts: 38  Submissions: ...

  6. Spring学习（四）—— java动态代理（JDK和cglib）

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他 的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托 ...

  7. 1014 我的C语言文法定义与C程序推导过程

    程序> -> <外部声明> | <程序> <外部声明> <外部声明> -> <函数定义> | <声明> < ...

  8. CNN误差反传时旋转卷积核的简明分析（转）

    CNN(卷积神经网络)的误差反传(error back propagation)中有一个非常关键的的步骤就是将某个卷积(Convolve)层的误差传到前一层的池化(Pool)层上,因为在CNN中是2D ...

  9. 关于初装kali linux 2.0时DEB文件安装失败的问题

    kali linux 是一个基于debian 的linux发行版本,支持deb文件格式的图形化安装. 刚装上kali linux时安装程序总是失败,提示处理时错误. 经过一番爬贴,是软件源的原因,解决 ...

  10. xstream 解析xml报文

    一.xml一种格式的数据转换为对象 pom.xml引入 <!--javaBean和XML的双向转换--> <dependency> <groupId>com.tho ...