手机
当前位置:查字典教程网 >网页设计 > 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:div 实现长英文字母自动换行CSS

用css实现隐藏文本框

用css实现文字的自动隐藏

一款纯css实现的垂直时间线效果

用css实现透视效果

用css控制标题字符溢出,用省略号表示

CSS 3实现DIV圆角效果完整代码

如何实现条状图表形式

css实现li中文本超出行宽自动隐藏

13种常用按钮、文本框、表单等CSS样式

精品推荐
分类导航