文本溢出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; // 显示省略号 ...
随机推荐
-
java.lang.OutOfMemoryError: bitmap size exceeds VM budget解决方法
1 BitmapFactory.decodeFile(imageFile); 用BitmapFactory解码一张图片时,有时会遇到该错误.这往往是由于图片过大造成的.要想正常使用,则需要分配更少的内 ...
-
ARM9的中断控制器
简要复习一下ARM9中断控制器的控制过程: 1.首先能识别触发的中断(对应中断源必须打开,然后查询当前中断状态寄存器),硬件会操控PC跳到中断向量入口(IRQ_HANDLE,硬件控制的只要是IRQ中断 ...
-
zeromq：c,c++,golang及nodejs使用
官网:www.zeromq.org 消息队列比较:http://www.cnblogs.com/charlesblc/p/6058799.html zeromq的一些观点:http://www.cnb ...
-
用SQL语句查找包含有某个关键字的存储过程、触发器、函数等(仅适用MS SQL SERVER)
第一种方法:利用系统表进行查询 --将text替换成你要查找的内容 select name from sysobjects o, syscomments s where o.id = s.i ...
-
JavaScript - Html 中使用JavaScript
把JavaScript插入到HTML页面要使用<script>元素.使用这个元素可以把JavaScript嵌入到HTML页面中,让脚本与标记混合在一起:也可以包含外部的JavaScript ...
-
Bellman-Ford最短路径
对于前面说到的最短路径的求解方法,不能解决负权边的情况,而Bellman-Ford却可以 共有n个顶点,m条边,每次输入u[i],v[i],w[i],代表从u[i]到v[i]的距离是w[i],对于所有 ...
-
HTTP MIME类型即HttpResponse.ContentType属性值列表
MIME-Typ Dateiendung(en) Bedeutung application/acad *.dwg AutoCAD-Dateien (nach NCSA) application/ap ...
-
D&;F学数据结构系列——B树（B-树和B+树）介绍
B树 定义:一棵B树T是具有如下性质的有根树: 1)每个节点X有以下域: a)n[x],当前存储在X节点中的关键字数, b)n[x]个关键字本身,以非降序存放,因此key1[x]<=key2[x ...
-
python -- ajax数组传递和后台接收
phper转pythoner 在当初使用php做网站开发的时候,前端ajax传递数据的时候,就是直接将一个数组传递过去,后台用$_POST['key']接收即可,没有考虑那么细,想来这不都是理所当然的 ...
-
SRM465
250pt: 给定50个整数点,范围-500-500之间.然后在这些点上选2个点作为中心,画边长为整数的正方形,并且正方形不能重叠(可以不平行),而且而且边长不同为不同方案.求有多少种方案.. 思路: ...