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

html-css048

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>

1.粗细 font-weight作用:设置文字是否加粗显示。属性名:font-weight(属于 font 属性的一个单一属性)

2.字体风格 font-style作用:设置文字是否斜体显示。属性名:font-style(属于 font 属性的一个单一属性)

3.行高 line-height作用:设置的是一行文字实际占有的高度,文字字号在行高中是垂直居中的。属性名:line-height,属于 font 属性的一个单一属性。

4.字体综合 font字体、字号、行高、加粗、斜体都是font综合属性的单一属性。font属性五个单一属性的值可以进行合写,属性值可以有2到多个,值之间用空格进行分隔。

5、水平对齐 text-align作用:设置文本水平方向的对齐。在盒子中,不论文本是单行还是多行,都会对应方向对齐。

6、文本修饰 text-decoration作用:设置文本整体是否有线条的修饰效果。

7、文本缩进 text-indent作用:设置段落首行是否进行缩进。

(1)使用Embed(嵌入样式单)排版样式:

即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的。使用<style>...</style>标签。例如:

<style type="text/css">

<!--

h2 { font-family: "宋体"font-size: 12ptfont-style: italiccolor: #FF0033background-color: #FFCCCC}

h1 { font-family: "Arial"font-size: 12ptcolor: #66FF66}

-->

</style>

(2)使用“link(外部样式单)排版样式”:

即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件(一个扩展名是css的文本文件)将设定你所有网页的规则。如果你改变样式单文件中的某行,所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多,则这项功能就非常方便了。

在<HEAD>区内使用<LINK>标签(注意:不再是<style>标签了):

<HTML>

<HEAD>

<LINK REL=stylesheet HREF="http://yoursute.com/my.css"TYPE="text/css">

</HEAD>

<body>

<h2>你好!朋友,欢迎光临Java2000的教学区。</h2>

<h1>Hello,everybody,welcome in java2000 !</h1>

</body>

</html>

★☆★说明:css文件的路径用绝对路径http://...)表示或者用相对路径(例如:../csscode/my.css)表示都可以。

然后再单独生成一个css文件,叫做my.css (随便起名)。文件内容如下:

h2 { font-family: "宋体"font-size: 12ptfont-style: italiccolor: #FF0033background-color: #FFCCCC}

h1 { font-family: "Arial"font-size: 12ptcolor: #66FF66}

只要将这个CSS文件上传到服务器指定的目录即可。

(3)使用"inline(行内样式单)排版样式":

inline样式单采用HTML标签的“style”属性,它的特点是“定义某一个标签的式样单风格”,只对所定义的标签起作用,并非对整个页面起作用。例如:

<p style="font-size: 14pt color: #99ff99 font-family: 宋体">层叠式样单</p>

看到的效果:

层叠式样单

使用行内样式单,你必须为每行指定样式规则,否则下一行时浏览器将使用页面的缺省设置。 但是:有时候这种方式却非常有效。

(4)使用“import(输入的外部式样单)”--适用于IE浏览器。

<html>

<head>

<style type="text/css">

<!--

@import url(my.css)

-->

</style>

</head>

<body>

<h3>输入的外部式样单</h3>

</body>

</html>