<!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 文本溢出显示省略号的更多相关文章

  1. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  2. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  3. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

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

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

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

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

  6. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  7. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  8. 文本溢出显示省略号，CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  9. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

随机推荐

  1. 一些比较常用的Linux命令

    我有一些是我是参考别人的,忘记是谁了,在这里要感谢一下ta. #命令格式就是就是由命令+空格+一些命令用法的选项(可以选择多个用法)+空格+/+目录名或者文件名,有些是直接打命令就可以了,比如ls - ...

  2. Fresco简单的使用—SimpleDraweeView

    本文出处:http://blog.csdn.net/u011164565/article/details/51330778 Fresco是一个第三方库,github官网地址:https://githu ...

  3. java时区问题的一个坑

    事情是这样的,前台传过去一个日期字符串,就像2016/12/15 00:00,2016/12/15 23:59类似的格式,但每次从日志平台查日志查询的时间范围都不对,而是提前了一天. 原因是在java ...

  4. 关于display: box 和 box-flex

    这两天做手机项目,使用到这个css3新属性.现在还不为所有浏览器支持,所以使用的时候要加上前缀.使用方法见下面: html代码: <div class="s-indLine" ...

  5. member template

    1.当且仅当类模板的参数相同时,你才能对类实体对象相互赋值,即将一个实体对象整体赋值给另外一个实体对象.不能将一种类型的实体对象赋值给另外一种实体对象.如: Stack<int> intS ...

  6. Object-C内存管理的理解总结

    今天看到了OC的内存管理这块,觉得很亲切. 自己的习惯是尽量自己掌控程序的空间和时间,有点强迫症的感觉.用C和C++做项目的时候,时时刻刻都在操心这new和delete的配对使用和计数,学习stl和b ...

  7. MySQL的limit查询优化

    MySQL的limit查询优化以下的文章主要是对MySQL limit查询优化的具体内容的介绍,我们大家都知道MySQL数据库的优化是相当重要的.其他最为常用也是最为需要优化的就是limit.MySQ ...

  8. E9相关技术链接

    1.飞思卡尔i.MX6q安装ubuntu14.04操作系统:http://demo.netfoucs.com/bzw073/article/details/42551399 2. DS-5社区版安装: ...

  9. Bookstore project using XAMPP 详细配置 Part 1

    这是学校的一个project,记录在这里,以备复习.主要是用XAMPP通过phpMyAdmin连接MySQL数据库,实现一个简单的查询功能. Outline Setup of XAMPP Implem ...

  10. c++的转换

    1.静态转换 static_cast 用于明确定义的变换 ,包括 编译器允许的非强制转换和不太安全但定义清楚的变换.ps:(非强制变换,窄化变换,隐式转换,类层次静态定位,void*强制转换) 2.常 ...