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 ...
随机推荐
- 【学习】JAVA的第一天(补)
补上1024第一天的JAVA学习,也刚好是程序员节.今天学习了JAVA的一些历史和基础环境的配置,以及HelloWorld入门程序. JAVA体系:JAVAME(一些简单的移动端开发).JAVAEE( ...
- Samba网络配置
Samba网络配置 操作环境 ubuntu14.04 1. 更新Linux源列表 sudo apt-get update 2. 安装Samba服务 sudo apt-get install samba ...
- Python 4 —— 函数与模块
函数和模块的使用 一.函数 一个例子说明一切. def hello(): print "hello world" def increment(num): num += 1 retu ...
- centos 安装apache 和 php5.6
centos 安装 php5.6,安装前需要先安装数据库和apache 安装 apache2.4 安装基础依赖:# yum install gcc gcc-c++ glibc glibc-devel ...
- Linux网卡bounding详解
多块网卡绑在一起,作为一个网卡用,实现负载均衡和提高带宽 linux双网卡绑定一个IP地址,实质工作就是使用两块网卡虚拟为一块,使用同一个IP地址,是我们能够得到更好的更快的服务.其实这项技术在 ...
- explode,split,preg_split性能比较
explode,split,preg_split性能比较 分类: php2012-07-12 09:46 1109人阅读 评论(1) 收藏 举报 三个函数都是用来对字符串进行分割,下面分几个实验来 ...
- cobbler 配置(转载)
Cobbler介绍 Cobbler 是一个系统启动服务(boot server),可以通过网络启动(PXE)的方式用来快速安装.重装物理服务器和虚拟机,支持安装不同的 Linux 发行版和 Windo ...
- ABP框架详解(一)ABPBootstrapper
在ABP框架的AbpBootstrapper主要用于框架的基本配置的注册和初始化,在Web应用启动阶段实例化一个AbpBootstrapper并调用Initialize方法初始化,该类主要包含两个公有 ...
- UNET学习笔记2 - 高级API(HLAPI)
高级API是在实时传输低级API基础上建立起来的,为多人游戏提供大量通用的组件.通过HLAPI开发者仅需少量的工作就可以搭建多人联网游戏. HLAPI 使用命名空间 UnityEngine.Netwo ...
- HK一行所见闻
香港一行 20多年来,未未去过HK,前段时间由于工作关系去了趟HK.感触良多. 一清早,福田过关,做火车,做地铁,一通到了目的地. 总结对那边的印象: 1,所有人都是粤语,包括工作交流.而且他们不怎么 ...