text-overflow:ellipsis ,溢出文本显示省略号
text-overflow:ellipsis
对溢出文本显示省略号有两个好处,
一是不用通过程序限定字数 二是有利于SEO。
需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。
通常的做法是这样的:
/*通常的做法是这样的:*/
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
width:100%;
/*例子*/
.ccname{
display:inline-block;
text-overflow:ellipsis;
max-width:50%;
overflow:hidden;
white-space:nowrap;
font-weight:bold;
}
text-overflow:ellipsis ,溢出文本显示省略号的更多相关文章
- 使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题
本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;( ...
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...
- css溢出文本显示省略号
css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...
- (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...
随机推荐
- BZOJ3771: Triple【生成函数】
Description 我们讲一个悲伤的故事. 从前有一个贫穷的樵夫在河边砍柴. 这时候河里出现了一个水神,夺过了他的斧头,说: "这把斧头,是不是你的?" 樵夫一看:" ...
- [转载]redis持久化的两种操作RDB和AOF
Redis 持久化: 提供了多种不同级别的持久化方式:一种是RDB,另一种是AOF. RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AO ...
- JQuery 基本知识,选择器,事件,DOM操作
一.基本知识 Jquery是什么? 它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库.它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的AP ...
- NASSA’s Robot
NASSA的机器人降落到了火星,降落的地方可以用X-Y坐标表示.机器人最开始在(0, 0).由于传输问题,部分指令可能会混淆,现在给出确定的命令与未知命令,请帮忙确认机器人的X.Y坐标最小最大值分别是 ...
- 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.3 日历
日历 日历可以单独应用于规则中,也可以和timer结合使用在规则中使用.通过属性calendars来定义日历.如果是多个日历,则不同日历之间用逗号进行分割. 在Drools中,日历的概念只是将日历属性 ...
- nginx php 配置
nginx php 环境的搭建步骤: 1.nginx 配置: server { listen 4446; server_name localhost; location / { root ...
- TensorFlow笔记-08-过拟合,正则化,matplotlib 区分红蓝点
TensorFlow笔记-08-过拟合,正则化,matplotlib 区分红蓝点 首先提醒一下,第7讲的最后滑动平均的代码已经更新了,代码要比理论重要 今天是过拟合,和正则化,本篇后面可能或更有兴趣, ...
- es6 中,大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部,确保采用严格模式
严格模式(use strict) 有助于防止问题用法,并且它也有助于安全使用 JavaScript. 在 ES5 中, 严格模式是可选项,但是在 ES6 中,许多特性要求必须使用严格模式. 因此大多数 ...
- netty答题
1,介绍一下netty netty封装了Java原生的nio,是一个异步和数据驱动的网络编程框架, 与tcp: netty -> Java Runtime Socket (io.nio.nio2 ...
- linux 搭建 redis
找了很多教程总有一个适合我 http://www.cnblogs.com/_popc/p/3684835.html 当然我的目录是/opt/redis 文章中的目录是/usr/local/redi ...