如何使用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. JavaScript高级 引用类型（一）《JavaScript高级程序设计（第三版）》

    引用类型是一种数据结构.它也被称作类.有时也被称作 对象的定义. 对象 是某个特定引用类型的实例.   一.Object类型 表达式上下文(expression context):指能够返回一个值 语 ...

  2. select 语句占位符

    对于已预备的语句,可以使用位置保持符.以下语句将从tb1表中返回一行: mysql> SET @a=1; mysql> PREPARE STMT FROM "SELECT * F ...

  3. NASM编译器的$和$$标记

    NASM中的times相当于MASM中的dup起到重复定义的作用. $表示当前行的偏移地址,$$表示当前段的起始偏移地址, ;------------------------------------- ...

  4. 在PHP项目中使用Standford Moss代码查重系统

    Standford Moss 系统是斯坦福大学大名鼎鼎的代码查重系统,它可以查出哪些同学提交的代码是抄袭别人的,从而将提交结果拒之门外.它对一切希望使用该系统的人都是开放的,那么在PHP的项目中如何使 ...

  5. 在SQL中取出字符串中数字部分或在SQL中取出字符部分

    在SQL中取出字符串中数字部分或在SQL中取出字符部分 编写人:CC阿爸 2013-10-18 近来在开发一个项目时,一包含数字的字符串,需要取出中间的数字部分进行排序.经过baidu搜索.并结合自己 ...

  6. Android工程目录及其作用简介

    1. src:存放所有的*.java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...

  7. js8月-4号，,思想

    1.js使用观察者模式,做异步编程.面向事件编程. 2.事件执行 (1)用户触发事件(2)定时执行 作业:选项卡,导航栏.

  8. delphi常用函数过程

    数据类型转化 1.1.         数值和字符串转化 Procedure Str(X [: Width [ : Decimals ]]; var S); 将数值X按照一定格式转化成字符串S.Wid ...

  9. Python多版本安装 Python2.7和Python3.5

    声明:本文仅仅在win8.1测试通过! 1.下载 Python2.7,3.5 2.依次安装Python27(c:\Python27)  Python35(c:\Python35) 3.c:\Pytho ...

  10. angularjs2 学习笔记（一） 开发环境搭建

    开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装node.js(https://nodejs.org/en/) ...