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. Python如何对折线进行平滑曲线处理？

    在用python绘图的时候,经常由于数据的原因导致画出来的图折线分界过于明显,因此需要对原数据绘制的折线进行平滑处理,本文介绍利用插值法进行平滑曲线处理: 实现所需的库 numpy.scipy.mat ...

  2. java处理大文本2G以上

    面试中经常碰到类似问题,问题的关键我觉得是用设置一个缓冲区 还有一个思路 是通过Linux split 命令将文件直接切割成小文件,再进行处理再汇总. 或者jdk7提供的 forkjoin 框架,利用 ...

  3. socket发送文字、图片、文件---基于python实现

    socket官方文档:https://docs.python.org/2/library/socket.html socket中文详细介绍:http://blog.csdn.net/rebelqsp/ ...

  4. Scrum立会报告+燃尽图（Beta阶段第一次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://coding.net/u/wuyy694 ...

  5. JAVA之路(一)

    距离做下复习JAVA并学好JAVA的决定已经过去一周了,我买了慕课网的JAVA入门视频,在图书馆借了三本关于JAVA的书——两本是JAVA入门经典,一本是JAVA WEB开发宝典.我的计划是短时间内复 ...

  6. Maven实现项目构建直接部署Web项目到Tomcat

    Maven实现项目构建直接部署Web项目到Tomcat配置如下: 1.Tomcat的用户及权限配置:在conf目录下,找到tomcat-users.xml,添加manager权限的用户. <ro ...

  7. 读着读着《构建之法》(Build To Win) 越精神的白雪儿的思考

    哲学家的宗旨是:我思,故我在 科学家的宗旨是:我发现,故我在 工程师的宗旨是:我构建,故我在 ——<工程学--无尽的前沿> 序言:珍惜角色“人”,注重实践“物” <构建之法>, ...

  8. Snapseed玩出新高度，分分钟让你成p图大神！ 转

    (,,･∀･)ﾉ゛嗨呀 小阔爱们! 不知道大家记不记得~ 上周我们的副条发了一篇: <看过他的照片,我才知道什么是创意摄影> 德国仅22岁超现实主义艺术家Justin Peters 创造了 ...

  9. VC的常用调试方法

    前言 VS是非常强大的IDE,所以掌握VSVC的常用方法,将会使得我们找出问题解决问题事半功倍. 目录 VSVC的常用调试方法 前言 1. Watch窗口查看伪变量 2. 查看指针指向的一序列值 3. ...

  10. elementUI使用本地变量进行验证，监测不到本地变量的变化 的问题

    对于饿了么组件自定义验证规则,组件库文档已经非常详细了:http://element-cn.eleme.io/#/zh-CN/component/form 我这里将验证中固定的值提取出来使用变量进行保 ...