手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css实现文本溢出显示省略号
css实现文本溢出显示省略号
摘要:HTML5标签p{/**white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到标签为止;overflow:hidde...

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5标签</title>

<style>

p{

/**

white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到

标签为止;

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/Js文本溢出自动添加省略号ellipsis

如何让文字滚动后自动停止效果示例

css实现文字的自动隐藏

用css实现隐藏文本框

css实现文字层浮在图片之上示例代码

CSS实现单行、多行文本溢出显示省略号的实现方法

用css实现透视效果

css实现文字过长显示省略号的方法

CSS:div 实现长英文字母自动换行CSS

精品推荐
分类导航