CSS如何限制显示的文本字数

html-css012

CSS如何限制显示的文本字数,第1张

"<HTML>

<title>css控制字数</title>

<head>

<style type=""text/css"">

.dd

{

border: solid 1px gray

width:180px

overflow: hidden

text-overflow: ellipsis

white-space: nowrap

course:hand

}

</style>

</head>

<body>

<span CLASS=""dd"">

信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数

</span>

<br>

<div CLASS=""dd"">

信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数

</div>

</body>

</HTML>

其中white-space 属性设置怎么处理元素内的空白。

这样个属性声明新建布局过程中怎么处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

1.继承性:Yes

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

2.脚本语法:

object.style.whiteSpace=""nowrap""在我们的 HTML DOM 教程中,您可找到更多有关 whiteSpace 属性的细节。

p

{

white-space: normal

}

可能的值

值 描述

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。

nowrap 文本不太会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。

名称:text-overflow

分类:IE专有样式

简述:设置是不是用省略号标示文本溢出

概述:text-overflow是设置是不是用省略号标示文本溢出的样式(Style)。

text-overflow清楚表明语法:

text-overflow : clip | ellipsis

取值:

clip : 默认值。不显示省略标记(...),而是容易的裁切

ellipsis : 当对象内文本溢出时显示省略标记(...)

overflow 属性设置当元素的内容溢出其区域时发生的事情。

继承性:No

表明

这样个属性定义溢出元素内容区的内容会怎么处理。假如值为 scroll,不论是不是要要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可放下全部内容也会显现滚动条。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法:

object.style.overflow=""hidden""在我们的 HTML DOM 教程中,您可找到更多有关 overflow 属性 的细节。

在我们的 HTML DOM 教程中,您也可找到完整的 Style 对象参考手册。

例子

p

{

overflow: scroll

}

可能的值

值 描述

visible 默认。内容不太会被修剪,会呈目前元素之外。

hidden 内容会被修剪,然而浏览器不太会显示供查看内容的滚动条。

scroll 内容会被修剪,然而浏览器会显示滚动条以便查看其余的内容。

auto 假如内容被修剪,则浏览器会显示滚动条以便查看其余的内容。"

css限制显示字数,文字长度超出部分用省略号表示

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。

(1).文字超出一行,省略超出部分,显示'...'

如果这种情况比较多,可以取一个切合作用的类名用于复用。

.line-limit-length {

overflow: hidden

text-overflow: ellipsis

white-space: nowrap//文本不换行,这样超出一行的部分被截取,显示...

}

<div class="item">

<p class="line-limit-length">最新消息:神秘地球黑洞深不可测,不停吸入周围海水。</p>

<i class="icon icon-arrow-go"></i>//图标字体

</div>

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

一、CSS层叠性

是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。

一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。

1.样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。

2.样式不冲突,不会层叠

3.CSS最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上。

二、CSS继承性

所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

简单的理解就是: 子承父业。

CSS最后的执行口诀: 龙生龙,凤生凤,老鼠生的孩子会打洞。

注意:

恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)

三、CSS优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:

1.继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

2.行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

3.权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

4.CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。