如何使用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. 十九、利用OGNL获取ValueStack中：根栈和contextMap中的数据

    利用OGNL获取ValueStack中:根栈和contextMap中的数据 原则:OGNL表达式如果以#开头,访问的contextMap中的数据 如果不以#开头,是访问的根栈中的对象的属性(List集 ...

  2. 十八、ValueStack&ActionContext（非常重点：值栈）

    ValueStack&ActionContext(非常重点:值栈) 1.针对用户的每次动作访问,都会创建属于自己的ValueStack对象 2.ValueStack中的的常用方法:功能一定要知 ...

  3. basis基本tcode

    SM21 ST11     SM50 查看work process 使用情况 操作相关的查询功能     SM## 常用tcode     SM01 锁定事务 SM04 用户清单 SM05 HTTP ...

  4. PeopleSoft Related Language Records

    As we all know, PeopleSoft is capable of maintaining application data in multiple languages within t ...

  5. [leetcode]_Palindrome Number

    判断integer是否为回文串(负数全部不为回文串) 思路很直接,提取出integer中的每一位,一头一尾进行比较是否相同. 一次AC , 直接上代码: public boolean isPalind ...

  6. Knockout.Js官网学习（text绑定）

    前言 text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数.该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上. 简单绑定 Today's ...

  7. echarts 各种细节问题

    1.最大值最小值异常 //如果数组中的数字是字符串的形式的话,echarts计算最大最小值不正确,故将String的数字转化成Number类型 //将包含字符串的数组转化为浮点数数组 function ...

  8. 在c#中使用mongo-csharp-driver操作mongodb

    1)下载安装 下载地址:http://github.com/mongodb/mongo-csharp-driver/downloads 编译之后得到两个dll MongoDB.Driver.dll:顾 ...

  9. mysql 修改字段长度

    mysql 修改字段长度 alter table news  modify column title varchar(130); alter table 表名 modify column 字段名 类型 ...

  10. 开源web终端ssh解决方案-gateone简介

    好久都没来写博客,最近忙啥去了呢? 一是忙于saltstack的二次开发,二是云计算的学习研究中,所以就一直没写东西,今天给大家介绍个工具. 1. 首先来说一下为什么要 web ssh? 许多人不是说 ...