文本溢出text-overflow
文本溢出text-overflow
问题:有一个新闻标题,标题宽度为200px,文字为宋体,加粗,文字大小为16px,颜色为黑色,行高为25px,要求单行显示,并且超出时显示“…”,请按要求完成效果。
以前在学习的时候,根本就没注意到有文本溢出这个东西,感觉实现起来很困难。
刚开始我的思路是这样的,设置它的max-width等于200
……没有成功(想的太简单了)
后面我又尝试这通过控制整个标题的overflow等于hidden,然后在通过:after在后面加上…
……还是没有成功(最终宽度大于200px)
没有办法,只能啃书,看之前的学习是否有遗漏的地方。后面发现css3中的text-overflow文本溢出比较特别。
text-overflow:
值:clip和ellipsis(其中clip不显示省略标记…,只是简单的裁切,相当于无效果;ellipsis文本溢出时显示省略标记…,省略标记插入的位置是最后一个字符)
注意:1、当文本一处属性用于表单元格时,需要设置table-layout:fixed
2、该属性兼容性很好,兼容ie6+的主流浏览器及移动端
到这里,我们前面的问题就好解决了,源码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> h1{ font-family: "宋体"; font-weight: bold; font-size: 16px; color: black; line-height: 25px; width: 200px; /*经典代码*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <h1>这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</h1> </body> </html>
此时得到的就是之前的问题想要的结果。
/*经典代码*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
到这里呢,探究还没结束,既然这是css3的新属性,那么前人是如何解决这一问题呢?
这个是我看到的一个较好的方法,虽然在现在看来不是那么的实用。其中的一些思维是非常值得学习的。它使用的是margin负值定位法。
文本溢出text-overflow的更多相关文章
- 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy
前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- ZH奶酪:HTML元素文本溢出显示省略号(...)
一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...
- css基础 -文本溢出 text-overflow:ellipsis;
.className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
- 【Flutter学习】基本组件之文本组件Text
一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget ...
- CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
随机推荐
- Visual Studio 2013 prerequisites
http://www.visualstudio.com/zh-cn/products/visual-studio-ultimate-with-msdn-vs#Fragment_SystemRequir ...
- WebServices CXF开发常见异常及解决方法
2011-7-14 10:10:59 org.apache.cxf.service.factory.ReflectionServiceFactoryBean buildServiceFromClass ...
- Linux环境的PHP执行
/usr/local/php5/bin/php -c /var/spool/php.ini -q /var/spool/auto.php
- Java基础集锦——利用Collections.sort方法对list排序
要想对List进行排序,可以让实体对象实现Comparable接口,重写compareTo方法即可实现按某一属性排序,但是这种写法很单一,只能按照固定的一个属性排序,没变法变化.通过下面这种方法,可以 ...
- 使用Condition实现多线程之间调用(生产消费模式)
一,object 类的wait(),notify()和notifyAll() Java 线程类也是一个object 类,它的实例都继承自java.lang.Thread 或其子类.wait(),not ...
- LoadRunner场景参数文件部分参数说明(我在某银行的整理)
由于场景中脚本繁多,同时设置60个脚本的“运行时设置”会提示个数限制信息,这时可以考虑通过场景的参数文件配置来批量解决这些事情,主要是提高工作效率. 选中自己保存的controller场景,鼠标右键点 ...
- Spring3系列13-Controller和@RequestMapping
Spring3系列13-Controller和@RequestMapping Controller返回值,String或者ModelAndView @RequestMapping关联url @Requ ...
- wordpress使用技巧
1.iis6下wordpress去掉index.php 1)安装ISAPIRewritev3.1.0.73 http://bbs.z.admin5.com/forum.php?mod=viewthre ...
- [leetcode]Rotate Array
in place交换 如果是k步,那么就是把后面k个放到前面了嘛. 我们先把整个数组reverse,然后把前面的reverse回来,再把后面的reverse回来 对于AB我们要通过reverse操作得 ...
- 数据人员Sql必会列转行
列转行上一篇博客已经介绍过了. 下面介绍一下行转列的实现 假设我们有一个数据表: CREATE TABLE row_to_line ( ) NOT NULL, -- 学生名称 yingyu integ ...