<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. python学习笔记012——pdb调试

    1 描述 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能, 主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变量的值等 调 ...

  2. 转 虫师的selenium借助AutoIt识别上传（下载）详解

    selenium借助AutoIt识别上传(下载)详解 2014-12-27 11:26 by 虫师, 755 阅读, 1 评论, 收藏,  编辑 AutoIt目前最新是v3版本,这是一个使用类似BAS ...

  3. AP_标准采购单付基本操作（流程）

    2014-06-04 Created By BaoXinjian

  4. FreeSWITCH检测DTMF数据的方法

    一.RFC2833 1. 介绍: RFC2833为带内检测方式,通过RTP传输,由特殊的rtpPayloadType即TeleponeEvent来标示RFC2833数据包.同一个DTMF按键通常会对应 ...

  5. js中window.location.search的用法和作用。

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...

  6. Linux 批量建立信任关系，实现ssh无password登陆的脚本

    作用: 把当前机器的ssh公钥拷贝到其它机器.以实现从当前机器能够ssh无password登陆到其它机器 用法: 1)把要加入的ip地址写入到一个文件里.比方host 2)把脚本保存为sh文件,如 i ...

  7. [转] 基本RS触发器

    在触发器中,最简单的触发器是基本RS触发器,它由两个与-非门(或者两个或-非门)来组成. 图5.2.1(a)是由与-非门构成的基本RS触发器,由图看出,基本RS触发器有两个输入端(和)和两个输出端(和 ...

  8. 转 MySQL中的行级锁,表级锁,页级锁

      对mysql乐观锁.悲观锁.共享锁.排它锁.行锁.表锁概念的理解 转载. https://blog.csdn.net/puhaiyang/article/details/72284702 实验环境 ...

  9. DOA——MUSIC算法

    一.均匀圆阵(UCA, Uniform Circular Array)的MUSIC算法 假设一个半径为R的M元均匀圆阵的所有阵元均位于坐标系X-Y平面内,第k-1个阵元坐标为,第i个窄带信号波长为,来 ...

  10. kafka传数据到Flink存储到mysql之Flink使用SQL语句聚合数据流（设置时间窗口，EventTime）

    网上没什么资料,就分享下:) 简单模式:kafka传数据到Flink存储到mysql 可以参考网站: 利用Flink stream从kafka中写数据到mysql maven依赖情况: <pro ...