CSS如何限制显示的文本字数
"<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控制文本溢出。推荐使用程序限制字数输出。对于内容padding或者元素溢出，这属于css不规范和兼容范畴。
下面列举一下文本溢出出现省略号的css写法：
{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(这里是行数 你可以控制你想在第几行末尾多余的显示省略号，之前的文本正常显示)
}
拓展资料
CSS（层叠样式表）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
多行文本溢出显示省略号：
p {
position:relative;
line-height:20px;
height:60px; /* 是line-height的三倍，如果设置了padding属性，也要加上padding的高度*/
overflow:hidden;
}
p:after {
content:"..."
}
拓展材料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
材料来源：百度百科
一个简单代码实例：
body span{
text-align: left;//左对齐
text-indent: 2em;//首航缩进两个字符
line-height: 24px;//行高
display:block;
height:50px;
overflow:hidden;
width:200px;
}
<span>
楼上大哥有点儿答非所问… 其实还是用overflow:hidden;就是了，但是你要限制行高跟容器的高度。然后限制容器的宽度既然你说了是要换行，那必然是写在<div><span><p>等一类标签里。 统一说一下：如果不是块元素，首先要加上display:block;然后限制行高（这里举个例子）：line-height: 24px;;其次容器高度hetght:50（这个数值取决于你的行高），然后宽度width:200px; 当然宽度是取决于你的需要。 然后如果想显示成两行那么就调节一个字体大小等等。
</span>
<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>
看到效果后，您应该相信这不是虚言了吧，o(∩_∩)o...！
其中white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增
的。
继承性：Yes
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。
脚本语法：
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 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
|
广告 您可能关注的内容 |
