CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)

<html>
<title>css控制字数</title>
<head>
<style type="text/css">
.dd {
    border: solid 1px gray;
    width: 180px;
    course: hand;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* for IE */
    -o-text-overflow: ellipsis; /* for Opera */
    -icab-text-overflow: ellipsis; /* for iCab */
    -khtml-text-overflow: ellipsis; /* for Konqueror Safari */
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
    -webkit-text-overflow: ellipsis; /* for Safari,Swift*/
}
</style>
</head>
<body>
    <span class="dd" style="display: block">

        信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数 </span>
    <br>
    <div class="dd">信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数
    </div>
</body>
</html>

备注:<span>标签不是块标签,如果没有办法显示为预期的样子,则需要将其改为块标签,添加 style="display: block"样式。

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 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

时间: 2024-11-08 21:49:18

CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)的相关文章

css 超出隐藏 ... 显示

overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 (只显示一行) 多行一出隐藏 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; 原文地址:https://www.cnblogs.com/lpp-11-15/p/12598819.html

您可能不知道的CSS元素隐藏“失效”以其妙用

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2191 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut

css 超出部分显示省略号

代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解释:简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden:),然后出现省略号( text-overflow: ellipsis). text-ellipsis是一个特殊的样式,

关于CSS中隐藏内容方法的思考

正在读<精通CSS>,很多样式需要用到内容隐藏,比如平时无内容,鼠标悬停时显示出内容.书中常用的方法是用text-indent:-1000em.margin-left:-1000em将元素隐藏到屏幕边缘之外,而display:none和visibility:hidden.overflow:hidden也可以做到隐藏,那么这几种用法有哪些利弊呢? 1.display:none; 搜索引擎可能认为被隐藏的元素属于垃圾信息而忽略,不利于SEO:屏幕阅读器会忽略被隐藏的元素. 2.visibility

手机开发必备技巧:javascript及CSS功能代码分享

1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 代码如下: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)height -            //  viewport 的高度 (

div中只显示2行文字超出隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; overflow: hidden;//超出隐藏 text-overflow: ellipsis;//超出文本设置为... display:-webkit-box

css超出一行添加省略号属性:text-overflow和white-space

css超出一行添加省略号属性:text-overflow和white-space A-A+ 前端博客?前端开发?CSS?14994View1 文章目录 1.text-overflow: ellipsis; 2.white-space属性 3.word-wrap 通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下HTML代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素,则会隐藏,添加省略号</p> CS

文字超出隐藏 且后面变成点

实例: <p>文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点</p> css解决方法 1.常规css方法——可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示  现在在火狐的高版本也支持了(火狐低版本不支持) p{width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 注