文本溢出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的更多相关文章

  1. 每日技术总结：setInterval,setTimeout,文本溢出,小程序，wepy

    前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...

  2. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

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

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

  4. ZH奶酪：HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

  5. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  6. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  7. 【Flutter学习】基本组件之文本组件Text

    一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget ...

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

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

  9. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

随机推荐

  1. 如何通过Socket TCP发送并接收一个文件？

    一.小结 1.大包发小包收,只发一次. 2.发时把文件扩展名,文件长度也随同一起发送,方便接收端接收时另存为正确的文件类型,并判断是否已经接收完毕. 如果不一起发送,分为文件扩展名,文件长度,文件内容 ...

  2. runtime MethodSwizzle 实践之 奇怪crash : [UIKeyboardLayoutStar release]: message sent to deallocated instance

    情景: 使用MethodSwizzle 实现对数组.字典 等系统方法的安全校验.显然能达到预期效果,但实际发现当 键盘显示的情况下  home app 进入后台,再单击app  图标 切换回前台时 发 ...

  3. Android开发之蓝牙 --修改本机蓝牙设备的可见性,并扫描周围可用的蓝牙设备

    一. 修改本机蓝牙设备的可见性 二. 扫描周围可用的蓝牙设备 一.  清单文件AdroidManifest.xml: <uses-permission android:name="an ...

  4. nexus安装实例

    Nexus安装 1.下载Nexus:[笔者版本nexus-2.11.2-03-bundle.tar.gz] 2. 安装nexus [root@localhost local]# pwd /usr/lo ...

  5. C#版Windows服务安装卸载小工具-附源码

    前言 在我们的工作中,经常遇到Windows服务的安装和卸载,在之前公司也普写过一个WinForm程序选择安装路径,这次再来个小巧灵活的控制台程序,不用再选择,只需放到需要安装服务的目录中运行就可以实 ...

  6. c++标准库

    Technical Report 1不是正式的库只是一个草案,作为C++ 2003标准的附加库被大多数编译器厂商所支持,它是个过渡性质的库,其实现将会作为C++11标准的一部分.很多编译器对C++11 ...

  7. 正则指引-字符组demo

    class Program { static void Main(string[] args) { string str = "b"; var result1 = Regex.Is ...

  8. 火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥的解决办法

    连接 https网址 时发生错误. 在服务器密钥交换握手信息中 SSL 收到了一个弱临时 Diffie-Hellman 密钥. (错误码: ssl_error_weak_server_ephemera ...

  9. iOS开发——高级技术精选&底层开发之越狱开发第二篇

    底层开发之越狱开发第二篇 今天项目中要用到检查iPhone是否越狱的方法. Umeng统计的Mobclick.h里面已经包含了越狱检测的代码,可以直接使用 /*方法名: * isJailbroken ...

  10. Jenkins xcodebuild There are no schemes in workspace

    Manage Schemes... 勾选 Shared 参考:http://stackoverflow.com/questions/14368938/xcodebuild-says-does-not- ...