css 文本溢出显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5标签</title>
<style>
p{
/**
white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到<br>标签为止;
overflow:hidden;不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
text-overflow:ellipsis;当文本对象溢出是显示...,当然也可是设置属性为clip不显示点点点;
-o-text-overflow:为了兼容opera浏览器;
*/
width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
}
div{
/*文字超出高度不显示*/
overflow:hidden;
display:block;
height:60px;
width:100px;
}
</style>
</head>
<body>
<p>这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。</p>
<div>这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。</div>
</body>
</html>
css 文本溢出显示省略号的更多相关文章
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- css文本内容显示省略号
文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...
- css文字溢出显示省略号
1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...
- 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法
一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
随机推荐
- redis cluster节点管理测试
####redis v3.2.0###添加节点:1.添加master节点 170 ./redis-trib.rb add-node 127.0.0.1:7007 127.0.0.1:7001 171 ...
- 页面超慢,zabbix却没报警
故障背景:网站页面打开速度非常慢 排查过程: 1.一开始用vmstat 看到procs下的r值稳定在5.6,由于这台服务器是12核24线程,并且cpu的wa很大,说明系统很轻松, 肯定不会报警了,那为 ...
- jquery 监听input输入值事件
<html> <head> <title></title> <script type="text/javascript" sr ...
- 虚拟机安装Ubuntu到U盘
这篇经验中特指系统安装到U盘,系统在U盘上,不是双系统,不会改变源系统的设置.只需在启动的时候选择启动路径,就可以从U盘启动你的系统.本文仅仅Ubuntu系统,举一反三可以按照此方法安装各种各样的系统 ...
- 页面加载完成后加载多个函数的js完美解决方案
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...
- 企业搜索引擎开发之连接器connector(三十)
连接器里面采用的什么样的数据结构,我们先从Document迭代器开始入手,具体的Document迭代器类都实现了DocumentList接口,该接口定义了两个方法 public interface D ...
- json中$ref对象重复引用问题
FastJson提供了SerializerFeature.DisableCircularReferenceDetect这个序列化选项,用来关闭引用检测.关闭引用检测后,重复引用对象时就不会被$ref代 ...
- 持续集成(CI)相关的一些工具,后续补充。。。。
持续集成的目标:使项目开发更加便捷 1.make工具 最原始的工具,负责组织构建的过程,即指挥编译器如何编译,连接器如何链接,最后生成一个可用文件. 2.Ant工具 Ant是一个构建工具,它只有一个配 ...
- 找回消失的ASUS显卡
笔记本蓝屏了几次之后,发现独立显卡GT335M不见了,设备管理器,驱动精灵,都找不到,网上问这个问题的人还不少,得到的回答几乎都是说重装驱动.根本不行,这时候安装nVIDIA驱动,会提示说“未找到兼容 ...
- .NET开发的大型网站列表、各大公司.NET职位精选,C#王者归来
简洁.优雅.高效的C#语言,神一样的C#创始人Anders Hejlsberg,async/await编译器级异步语法,N年前就有的lambda表达式,.NET Native媲美C++的原生编译性能, ...