如何使用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. ios球体弹跳游戏源码

    一款耐玩的ios游戏源码,画面上有很多小星星,球体落下的时候,你需要在画面上画出一条条的线条让球体弹跳起来然后吃掉小星星,如果没借助球体就失败了.游戏有很多关卡.注意: <ignore_js_o ...

  2. linux查找日志常用命令

    1.查找文件test中目标字符串(xxxx)出现的行数位置grep -n xxxx  test 2.文件test从某一行(n)开始显示more +n  test 3.查询文件test中出现目标字符串x ...

  3. TortoiseGit和Git操作git@osc简要说明

    之前搞过一次git@osc的操作,重装系统后今天准备再次提交代码,悲剧了,我忘了之前怎么干得了,再次百度以后,终于搞定了,准备写下来,省得下次再忘了. 1.首先生成key,使用下面的工具,在Torto ...

  4. c#获取多个List<class>合并、并将相同条件下的值累计sum

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 整理一些有意思的php笔试题

    慢慢补充 1.下面这段代码的输出是什么: $a = in_array('01', array('1'))==var_dump('01'==1); echo $a; 说明:in_array('01', ...

  6. Centos 7配置ntp时间同步

    1.NTP时钟同步方式说明     NTP在linux下有两种时钟同步方式,分别为直接同步和平滑同步: 1)直接同步      使用ntpdate命令进行同步,直接进行时间变更.如果服务器上存在一个1 ...

  7. 强大的网络通信框架（实现缓存）--第三方开源--volley

    Android Volley是Android平台上很好用的第三方开源网络通信框架.使用简答,功能强大. Android Volley的库jar包Volley.ja下载连接地址:Volley下载 下载后 ...

  8. 【转】利用DCC32实现命令行批量编译

    *.dof [Compiler] A=1 B=0 C=1 D=1 E=0 F=0 G=1 H=1 I=1 J=1 K=0 L=1 M=0 N=1 O=1 P=1 Q=0 R=0 S=0 T=0 U=0 ...

  9. Spring源码下载

    Spring已经将源码从SVN迁移到了Github,而且也改为基于Gradle的构建来构建项目,它取代了之前的ANT+Ivy系统,所以要构建Spring源码要先安装Github和Gradle. 首先假 ...

  10. hdu 5311 Hidden String

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5311 Hidden String Description Today is the 1st anniv ...