<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. if语句的数据驱动优化（Java版）

    举个栗子,如果我要输出数字对应的中文描述,我可以用这种方法来写: int num=2; if (num==1){ System.out.println("一"); } else i ...

  2. asp.net core mvc视频A：笔记3-7.ViewStart与ViewImort

    项目位置 放在其它目录应该不会执行! 默认配置 默认配置

  3. LCA近期公共祖先

    LCA近期公共祖先 该分析转之:http://kmplayer.iteye.com/blog/604518 1,并查集+dfs 对整个树进行深度优先遍历.并在遍历的过程中不断地把一些眼下可能查询到的而 ...

  4. 服务商域名DNS大全

    服务商域名DNS:  服务商 DNS服务器   常用DNS: 英文域名DNS 主DNS名称:ns11.xincache.com 辅DNS名称:ns12.xincache.com 说明:新网共有5组DN ...

  5. 使用xshell远程登录ubuntu使用vi编辑不能使用删除键方向键

    近期安装了xshell,远程登录上ubuntu后,在插入模式下,按删除键没有任何反应,按方向键分别打印出A.B.C.D,每个字符一行. 这是因为ubuntu初始化安装的是vi的tiny版本,解决办法安 ...

  6. Spring AOP之Introduction(@DeclareParents)简介（转）

    Spring的文档上对Introduction这个概念和相关的注解@DeclareParents作了如下介绍: Introductions (known as inter-type declarati ...

  7. Oracle中查询表字段基本信息、主键、外键（整理）

    背景 因为项目某些模块的数据结构设计没有严格按照某规范设计,所以只能从数据库中查询数据结构,需要查询的信息如下:字段名称.数据类型.是否为空.默认值.主键.外键等等. 在网上搜索了查询上述信息的方法, ...

  8. C# 遍历枚举（枚举是目的，遍历（获取）是手段）

    C# 遍历枚举   C#中,如何获取(遍历)枚举中所有的值: public enum Suits { Spades, Hearts, Clubs, Diamonds, NumSuits } priva ...

  9. Sublime Text 3 快捷鍵

    /*On OS X, basic text manipulations (left, right, command+left, etc) make use of the system key bind ...

  10. CocoaPods did not set the base configuration of your project 问题解决方式

    今天在使用pod install的时候.出现了 [!] CocoaPods did not set the base configuration of your project because you ...