<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. Fort.js – 时尚、现代的进度提示效果

    Fort.js 是表单填写进度提示效果的 JavaScript 库.使用很easy. 提供了Default.Gradient.Sections 以及 Flash 四种效果 用Fort.js非常easy ...

  2. 解决windows server2012 评估版本过期，系统会自动关机

    解决windows server2012 评估版本过期,系统在1小时后会自动关机. 重置方法:以管理员方式运行命令行,执行slmgr.vbs /rearm,可以使授权延长180天,但是仅能延长5次.

  3. ubuntu14中创建python虚拟环境

    一.安装python-virtualenv包 sudo apt-get install python-virtualenv 安装完成后,创建一个虚拟环境文件夹. mkdir VENVcd VENV 创 ...

  4. 利用eChart绘制网页图表

    首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...

  5. phpexcel单元格内换行

    我说的这个换行不是字多了,自动换行的那种,是在特定位置添加换行符 代码如下: $objPHPExcel->setActiveSheetIndex(0) ->setCellValue('A4 ...

  6. 3dmax 2012 贴图通道与uv通道，烘焙场景

    1,修改贴图通道(假设要将贴图由自发光通道改至漫反射通道): 选中材质球,通入贴图栏,选中自发光通道中的贴图路径,拖至漫反射通道,松开鼠标时弹出对话框,选'交换'.(有时候解析fbx文件时解析不出贴图 ...

  7. 在Spring中注入Java集合

    集合注入重要是对数组.List.Set.map的注入,具体注入方法请参照一下代码(重点是applicationContext.xml中对这几个集合注入的方式): 1.在工程中新建一个Departmen ...

  8. MYSQLDUMP参数详解（转）

    mysqldump客户端可用来转储数据库或搜集数据库进行备份或将数据转移到另一个SQL服务器(不一定是一个MySQL服务器).转储包含创建表和/或装载表的SQL语句. 如果你在服务器上进行备份,并且表 ...

  9. OPENGL NEHE Lesson11 11课的计算公式推导

    计算多边形公式推导: 条件x 离散的值从0到45; y离散的值从0到45; z是符合正弦波. 问题: 1 要求x’=f(x)映射到 x’ ∈[-4.5, 4.5], x ∈{0, 1, 2, …, 4 ...

  10. sass & compass 实战录

    一.sass 是什么 Css的一种预处理器 是基于css进行语法扩展而成 主要目的是为了提高开发效率,弥补css语法不足的缺陷 同样流行的预处理器还有:less.stylus 二.SASS的基本语法 ...