一、文本溢出省略号显示  

  1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示)

  定义此属性有四个必要条件:1)须有容器宽度:width:value;

               2)强制文本在一行内显示:white-space:nowrap;

               3)溢出内容隐藏:overflow:hidden;

               4)溢出文本显示“...”:text-overflow:ellipsis;

  2.溢出属性:overflow:visible(默认值,不会被隐藏)

        hidden(内容隐藏)

        auto(如果内容隐藏,则浏览器内显示滚动条)

        scroll(内容会隐藏并显示滚动条)

        inherit(规定应该从父元素继承overflow属性的值)

        注:overflow-x:hidden;隐藏横向滚动条

          overflow-y:hidden;隐藏纵向滚动条

  3.空余空间属性 (该属性用来设置如何处理元素内的空白;):white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit

      normal(默认值,空白会被浏览器忽略)

      nowrap(文本不会换行,文本会在同一行上继续,直到遇到标签<br />为止)

      pre(空白会被浏览器保留,其行为方式类似HTML中的pre标签)

      pre-wrap(保留空白符序列,但是正常的进行换行)

      pre-line(合并空白符序列,但是保留换行符)

      inherit(规定应该从父元素继承White-space属性的值(ie浏览器不支持此属性值))

text-overflow文本溢出隐藏“...”显示的更多相关文章

  1. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  2. CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  3. 设置text-overflow文本溢出隐藏时的对齐问题

    设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧. <p> <span ...

  4. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  5. css实现文本溢出用...显示

    文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...

  6. css 文本换行 文本溢出隐藏用省略号表示剩下内容

    正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...

  7. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  8. CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)

    当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...

  9. 【UWP】仅在TextBlock文本溢出时显示Tooltip

    前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test&qu ...

随机推荐

  1. Lodop打印控件 打印透明图问题

    Lodop通过增设transcolor属性实现了“先字后章”效果,这个属性可以把某种颜色转成类似透明的效果.例如:把图章的底色白色变成透明:transcolor="#FFFFFF" ...

  2. cefSharp 开发随笔

    最近用cefSharp开发一点简单的东西.记录一点随笔,不定时更新. 1.用nuget安装完之后,架构要选择x86或者x64,否则编译会报错(截止到Chrome 55版本) 2.向Chrome注册C# ...

  3. VS Code 编辑器

    使用VS Code 编辑器有一段时间了,感觉非常好用,已经成为了我的第一选择了.现在需要学习了一下了. 1,更改编辑器的默认设置 文件 =>首选项 => 设置 或 ctrl + ,(逗号) ...

  4. servlet篇 之 servlet概念及其功能实现

    Servlet概念: 在JavaWeb中,把那些可以使用浏览器通过url的形式来访问的java类,叫做servlet. servlet就是java类中的一种,只不过这种java类有一个特殊的功能,就是 ...

  5. windows开关机事件

    开关机事件.xml <ViewerConfig> <QueryConfig> <QueryParams> <Simple> <BySource&g ...

  6. 「Splay」普通平衡树模板

    口诀: $rotate$:先上再下,最后自己 $splay$:祖父未到旋两次,三点一线旋父亲,三点折线旋自己. $delete$:没有儿子就删光.单个儿子删自己.两个儿子找前驱. 易错点: $rota ...

  7. 微信小程序避坑指南

    如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2 ...

  8. 多项式细节梳理&模板(多项式)

    基础 很久以前的多项式总结 现在的码风又变了... FFT和NTT的板子 typedef complex<double> C; const double PI=acos(-1); void ...

  9. UOJ #207. 共价大爷游长沙(LCT + 异或哈希)

    题目 维护一颗动态树,并维护一个点对集合 \(S\) . 动态查询一条边,是否被集合中所有点对构成的路径包含. \(n \le 100000, m \le 300000\) 题解 orz 前辈 毛爷爷 ...

  10. 【Luogu3733】[HAOI2017]八纵八横(线性基,线段树分治)

    [Luogu3733][HAOI2017]八纵八横(线性基,线段树分治) 题面 洛谷 题解 看到求异或最大值显然就是线性基了,所以只需要把所有环给找出来丢进线性基里就行了. 然后线性基不资磁撤销?线段 ...