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

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

  1. CSS 超出隐藏问题

    .dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...

  2. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  3. css 超出隐藏显示...

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  5. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

  6. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

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

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  8. line-height超出隐藏显示的行数和垂直居中

    line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...

  9. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

随机推荐

  1. iOS网络框架 AFNetworking

    -(void)GetActivationUser{ NSString *url = @"http://app.xxxx.com/music/search?key=%E9%AC%BC%E5%9 ...

  2. Netty（六）：Netty中的连接管理（心跳机制和定时断线重连）

    何为心跳 顾名思义, 所谓心跳, 即在TCP长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, 通知对方自己还在线, 以确保 TCP 连接的有效性. 为什么需要心跳 因为网络的不可靠性, 有可 ...

  3. java线程高并发编程

    java线程具体解释及高并发编程庖丁解牛 线程概述: 祖宗: 说起java高并发编程,就不得不提起一位老先生Doug Lea,这位老先生可不得了.看看百度百科对他的评价,一点也不为过: 假设IT的历史 ...

  4. C++11新特性应用--介绍几个新增的便利算法(用于排序的几个算法)

    继续C++11在头文件algorithm中添加的算法. 至少我认为,在stl的算法中,用到最多的就是sort了,我们不去探索sort的源代码.就是介绍C++11新增的几个关于排序的函数. 对于一个序列 ...

  5. linux命令（26）:Bash Shell 获取进程 PID

    转载地址:http://weyo.me/pages/techs/linux-get-pid/ 根据pid,kill该进程:http://www.cnblogs.com/lovychen/p/54113 ...

  6. C++ 11 Lambda表达式、auto、function、bind、final、override

    接触了cocos2dx 3.0,就必须得看C++ 11了.有分享过帖子:[转帖]漫话C++0x(四) —- function, bind和lambda.其实最后的Lambda没太怎么看懂. 看不懂没关 ...

  7. Qt 的QString类的使用

    Qt的QString类提供了很方便的对字符串操作的接口. 使某个字符填满字符串,也就是说字符串里的所有字符都有等长度的ch来代替. QString::fill ( QChar ch, int size ...

  8. C#中一道关于ADO.NET的基础练习题

    在控制台程序中实现以下功能: 1. 构建3个表(程序启动时自动建立)  (20分): 1) Employee 职工表 (工号.姓名.性别.年龄.部门)  (Num.Name.Sex.Age.Depar ...

  9. 1326: The contest（并查集+分组背包）

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1326 殷犇有很多队员.他们都认为自己是最强的,于是,一场比赛开始了~ 于是安叔主办了一场比赛,比赛 ...

  10. 成果展示-RSA算法工具