<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. oracle导表小结

    事件描述:从A主机oracle服务器导出.sql文件到B主机,发现1.导入存在乱码 2.提示USERS表空没有权限(A B主机均为window系统) 1.针对第一点乱码 首先确认系统的默认字符编码GB ...

  2. LeetCode总结 -- 一维数据合并篇

    合并是一维数据结构中非经常见的操作, 一般是排序, 分布式算法中的子操作. 这篇总结主要介绍LeetCode中关于合并的几个题目: Merge Two Sorted ListsMerge Sorted ...

  3. 2-05. 求集合数据的均方差（15） (数学啊 ZJU_PAT)

    题目链接:http://pat.zju.edu.cn/contests/ds/2-05 设计函数求N个给定整数的均方差.若将N个数A[]的平均值记为Avg,则均方差计算公式为: 输入格式说明: 第1行 ...

  4. ps钢笔工具 （重要工具）

    ps钢笔工具 ctrl键 + 鼠标选中操作的点 = 移动点 alt键 + 方点 + 拖拉 = 拖出两个手柄 和 控制两端弧度 alt键 + 圆点 = 控制单向弧度

  5. Android: TODO 应用交互的两种实现方法（Behavior）

    最近在写 TODO app,涉及到 Calendar 和 RecyclerView 的交互, 需求: 1. 往上滑动, Calendar 显示为周 2. 周显示模式下,往下滑动,显示为月 3. 列表下 ...

  6. [svc]caffe安装笔记

    以前是word排版,加上没有些技术博客经验,相当的糟心. 现在想改,发现博文太多,找不到对应在那一页了,所以老的博文留着吧. caffe,这是是数据组需要做一些大数据模型的训练(深度学习), 要求 服 ...

  7. MySql 触发器同步备份数据表记录

    添加记录到新记录表 DELIMITER $$ USE `DB_Test`$$ CREATE /*!50017 DEFINER = 'root'@'%' */ TRIGGER `InsertOPM_Al ...

  8. ~function(){}() 和(function(){}){}

    使用~function(){}()也是声明并调用函数的方法之一: 这是一段使用~function(){}()来声明函数并调用函数的例子: ~function() { alert(typeof next ...

  9. electron 的跳转

    // 测试 正常跳转应该登录成功 // that.timer = setInterval(() => { that.$router.push('/mainChat');//路由跳转mainCha ...

  10. jQuery实现的层级轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...