在简介、引言中常见:文字只有一排,超出宽度以省略号显示,像这样

实现方法:在公共库定义otw类

.otw{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

其中

text-overflow:ellipsis 显示省略符号来代表被修剪的文本;

white-space:nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

css公共库——简介中超过长度显示省略号的更多相关文章

  1. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. TextView设置最多显示指定个字符,超过部分显示...(省略号)

    今天在公司遇到一个需求:TextView设置最多显示8个字符,超过部分显示...(省略号),网上找了很多资料,有人说分别设置TextView的android:signature="true& ...

  3. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  4. table中超过长度的列,显示省略号

    <style type="text/css"> .table-ellipsis { table-layout: fixed; width: 100%; } .table ...

  5. CSS控制文本的长度,超过一行显示省略号

    代码如下: <div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overfl ...

  6. CSS单行、多行文本溢出显示省略号(……)解决方案

    单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...

  7. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  8. CSS单行、多行文本溢出显示省略号(……)

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  9. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

随机推荐

  1. 压力测试工具ab - Apache HTTP server benchmarking tool

    搞互联网开发,压力测试必不可少.压力测试的工具很多,我用过ab和JMeter,今天主要讲ab的用法. 1.ab是什么 ab is a tool for benchmarking your Apache ...

  2. Python_字符串连接

    #join() 与split()相反,join()方法用来将列表中多个字符串进行连接,并在相邻两个字符串之间插入指定字符 li=['apple','peach','banana','pear'] se ...

  3. react native 1跳2 2跳3 3跳4 4pop回2

    网上有介绍导航的很多了 就不一一说了   直接说一个小功能 popToRoute pop回指定页面  第一次写 组织能力不是特别好 直接贴代码 例如 我们有四个页面  从第四个pop到第二个页面  先 ...

  4. 2017年Kali Linux更新源

    终端输入: leafpad /etc/apt/sources.list 打开更新源配置文件,将下面的更新源复制到原内容的前面: #163网易 Kali源 deb http://mirrors.163. ...

  5. Kali Linux安装VMWare Tools

    操作环境: 虚拟机操作系统: Kali Linux 2017.2 虚拟化软件: VMWare workstation 14 pro 加载光盘 在VMWare上依次点击"虚拟机->安装V ...

  6. 在Windows下同时安装Python2.x和Python3.x

    前言: Python现在是两个版本共存,Python2.x和Python3.x都同时在更新.但是Python2.x和Python3.x的区别还是很多的(以后我可能会写一篇文章列举一下Python2.x ...

  7. 下载恒星源码使用vs2015运行配置

    需要安装PostgreSQL 配置安装路径下的include 项目 右键→属性 在启动项目项目中配置 右键→属性→展开连接器→输入

  8. 从头到尾彻底解析Hash 表算法

    作者:July.wuliming.pkuoliver  出处:http://blog.csdn.net/v_JULY_v.  说明:本文分为三部分内容,    第一部分为一道百度面试题Top K算法的 ...

  9. go语言nsq源码解读一-基本介绍

    简单介绍一下nsq. 参考 http://feilong.me/2013/05/nsq-realtime-message-processing-system 的介绍:NSQ是由知名短链接服务商bitl ...

  10. bzoj5251 [2018多省省队联测]劈配

    直接网络流模拟即可AC. 可持久化+暴力=90分, 可持久化+二分=30分, 暴力加边+二分=100分. 我也很无奈啊. Ivan便涨红了脸,额上的青筋条条绽出,争辩道,“memcpy也是可持久化…… ...