如何使用css控制文章标题字数？

最佳答案

控制文章标题字数，不是动态网页的专利，如果静态页面使用CSS样式，也可以实现相同的效果！

看这个例子，你们可以复制到记事本保存为HTML文件看效果！

<html>

<title>css控制字数</title>

<head>

<style type="text/css">

.dd

{

border: solid 1px gray;

width:180px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

course:hand;

}

</style>

</head>

<body>

<span class="dd">

信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数

</span>

<br>

<div class="dd">

信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数

</div>

</body>

</html>

看到效果后，您应该相信这不是虚言了吧，o(∩_∩)o...！

其中white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增

的。

继承性：Yes
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。

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

jquery方法

$(".table-title").each(function(){

 var maxwidth=20;

 if($(this).text().length>maxwidth){

  $(this).text($(this).text().substring(0,maxwidth));

  $(this).html($(this).html()+"…");

 }

});

　　

如何使用css和jquery控制文章标题字数？的更多相关文章

  1. 织梦arclist文章标题字数太短

    解决dedecms UTF-8首页文章标题显示字数太短的办法原因分析:因为UTF-8编码1个中文汉字占用的是3个字节,GBK占用的是2个字节,所以,原先$titlelen = AttDef($titl ...

  2. 修改DEDECMS文章标题长度,解决DEDECMS文章标题显示不全

    dedecms系统使用过程中,常遇到输入的标题原本输入的字数跟保存成功后的数字长度不一样,这个是因为 织梦dedecms系统默认的文章标题字数限制是60,也就是只能输入30个汉字,超过的会自动截断删除 ...

  3. DEDECMS文章标题显示不全的原因以及解决方法

    首先这里说一下编码问题:UTF-8与GBK(通常为GB2312). GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准):GBK编码专门用来解决中文编码的,是双字节的 ...

  4. css,js,jquery的载入方式和属性控制

    本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...

  5. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  6. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  7. 转载一篇比较详细的讲解html,css的一篇文章，很长

      转载自这里,转载请注明出处. DIV+CSS系统学习笔记回顾   第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 ...

  8. 如何修改DEDECMS文章标题长度

    方法一:      首先你要进入dedecms后台,系统——系统基本参数——其他选项——文档标题最大长度——在这修改为200或更大(其实200应该是足够了). 方法二:      进入phpmyadm ...

  9. Dede文章标题长度修改

    方法一.首先你要进入dedecms后台,系统——系统基本参数——其他选项——文档标题最大长度——在这修改为200或更大(其实200应该是足够了). 方法二.进入phpmyadmin,点击dede_ar ...

随机推荐

  1. JSF Action 与ActionListener的区别

    JSF Action 与ActionListener的区别 标签: 杂谈    事件  检验  参数  事件产生  页面跳转  Action  有 无参数,不传入当前控件,有返回值    当铵钮被单击 ...

  2. 017Makefile工程管理

    1.为什么需要Makefile? 利用Makefile和make的合作,可以把很多很多的工作合并成一个非常简单的命令:make: make能够使整个程序的编译.链接只需要一个命令(make)就可以完成 ...

  3. Android WebRTC 音视频开发总结（四）-- webrtc传输模块

    在介绍WebRTC通讯之前我们先来看一个P2P视频聊天包括的主要过程,转载请说明出处(博客园RTC.Blacker): 音视频数据采集->编码->发送->接收->解码-> ...

  4. javaSE第四天

    第四天    18 1. switch语句(掌握)    18 (1)格式:    18 (2)面试题    19 (3)执行流程:    19 (4)注意事项:    19 (5)案例:    19 ...

  5. MFC 线程创建方式

    MFC 分UI线程和工作线程,一般现在的应用程序都是一个主UI线程和N个工作线程来完成工作.主UI线程获取到工作线程发送的信息来刷新界面. 不过因为工作需要,MFC有要维护的项目,因此就学习一下MFC ...

  6. C#中的委托、事件和设计模式（转载）

    引言 委托和事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去的人 ...

  7. Java transient volatile关键字(转)

    Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...

  8. 3）Java容器

    3)Java容器   Java的集合框架核心主要有三种:List.Set和Map.这里的 Collection.List.Set和Map都是接口(Interface). List lst = new ...

  9. Python之mongodb操作

    1.安装驱动pymongo 输入命令:pip install pymongo 2.直接使用驱动 #encoding=utf-8 from pymongo import MongoClient clie ...

  10. Python学习教程(learning Python)--3.2 if-else分支语句

    if-else分支语句结构的特点是当conditon条件满足时,执行if下的语句块,当condition条件不满足时执行else下的语句块,也就是说根据条件来控制让某些语句执行,某些语句不被执行. i ...