text-overflow是CSS3的一个属性,其作用是当文本溢出包含它的元素时,应该裁剪还是将多余的字符用省略号来表示。

该属性一般和overflow:hidden属性一起使用。

text-overflow: clip|ellipsis|string

1、clip:修剪文本。即将溢出的文本裁剪掉。如以下例子,如果需要显示This is an Action,则:

white-space:nowrap; 
text-overflow:clip;
overflow:hidden;

结果:

2、ellipsis: 当文本溢出时,用省略号代替溢出的文本。如:

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

结果:

每天CSS学习之text-overflow的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  5. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  6. HTML, CSS学习笔记(完整版)

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  7. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  8. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  9. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  10. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

随机推荐

  1. eslint简单的规范

    module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, // h ...

  2. HTML5-用canvas画布rotate字体旋转(中国象棋棋谱)。

    一开始我们老师安排我做这个作业,在这个作业我遇到了一个很重大的问题就是,文字旋转这么旋转,我查了很多资料. 1发现绘画正方形,使他正方形中心原点旋转非常容易理解.(我相信这个很多人看一下都会懂,) 1 ...

  3. R中的高效批量处理函数(lapply sapply apply tapply mapply)(转)

    转自:http://blog.csdn.net/wa2003/article/details/45887055 R语言提供了批量处理函数,可以循环遍历某个集合内的所有或部分元素,以简化操作. 这些函数 ...

  4. English trip V1 - B 16. Giving Reasons 提供个人信息 Teacher:Lamb Key: Why/Because

    In this lesson you will learn how to give reasons for something you've done. 课上内容(Lesson) Why do peo ...

  5. Python自学:第二章 数字 整数

    >>>2 + 3 5 >>>3 - 2 1 >>>3 * 2 6 >>>3 / 2 1.5

  6. ERROR org.redisson.client.handler.CommandDecoder - Unable to decode data. channel

    一.异常出现的场景 某一天下午,测试突然跑过来说,IOS系统APP访问500,Android没问题.我的第一反应是那就奇怪了,调的接口都是一样的,莫非和系统有关系.而且这个错误重启服务后,过一段时间才 ...

  7. vue 点击一个div,使input获得焦点

    <div class="inputMessage" @click="inputMessage">输入留言</div> <input ...

  8. 原生JS实现瀑布流布局

    瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 1.首先瀑布流所有的图片应该保持宽度一致,高 ...

  9. CentOS6.8环境下搭建yum网络仓库

    CentOS6.8环境下搭建yum网络仓库 本文利用ftp服务,在CentOS6.8系统下搭建一个yum仓库,然后用另一台虚拟机访问该仓库.并安装程序包 安装ftp服务 查询ftp服务是否安装 [ro ...

  10. array_multisort以及php中的排序函数

    1. array_multisort(array_column($arr, $key), SORT_DESC, $arr); // 根据二维数组中的某一列对数组进行增序或者降序排列 什么是关联数组呢? ...