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. 四种方式实现波浪效果（CSS效果）

    一)第一种方法 (1)HTML结构 <body> <div class="animate wave"> <div class="w1&quo ...

  2. 大数据-storm学习资料视频

    storm学习资料视频 https://pan.baidu.com/s/18iQPoVFNHF1NCRBhXsMcWQ

  3. react native基础与入门

    react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...

  4. 撤销 git merge

    由于太多人问怎么撤销 merge 了,于是 git 官方出了这份教程,表示在 git 现有的思想体系下怎么达到撤销 merge 的目标. 方法一,reset 到 merge 前的版本,然后再重做接下来 ...

  5. C++ 名字空间namespace的使用

    A namespace is a scope.C++ provides namespaces to prevent name conflicts.A namespace is a mechanism ...

  6. CF 1008B Turn the Rectangles（水题+贪心）

    There are n rectangles in a row. You can either turn each rectangle by 90 degrees or leave it as it ...

  7. Scrum立会报告+燃尽图（十月十日总第一次）：选题

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2190 Scrum立会master:付佳 一.小组介绍 组长:付佳 组员: ...

  8. 《JavaScript》页面跳转

    window.location.href: <i onclick="window.location.href = '/Form/Form_Write/Index?viewname=Fo ...

  9. 配置EditPlus编辑器使其成为Python的编辑、执行环境

    1.添加Python群组 运行EditPlus,选择工具→配置用户工具进入参数设置框. 单击添加工具→应用程序.菜单文字输入python,命令为Python的安装路径,参数输入 $(FileName) ...

  10. Alpha-8

    前言 失心疯病源8 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 20:00~23:00 代码整合,已形成可用模块,但还需适应场景局部优化 代码签入gith ...