如何使用css和jquery控制文章标题字数？
如何使用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控制文章标题字数？的更多相关文章
- 织梦arclist文章标题字数太短
解决dedecms UTF-8首页文章标题显示字数太短的办法原因分析:因为UTF-8编码1个中文汉字占用的是3个字节,GBK占用的是2个字节,所以,原先$titlelen = AttDef($titl ...
- 修改DEDECMS文章标题长度,解决DEDECMS文章标题显示不全
dedecms系统使用过程中,常遇到输入的标题原本输入的字数跟保存成功后的数字长度不一样,这个是因为 织梦dedecms系统默认的文章标题字数限制是60,也就是只能输入30个汉字,超过的会自动截断删除 ...
- DEDECMS文章标题显示不全的原因以及解决方法
首先这里说一下编码问题:UTF-8与GBK(通常为GB2312). GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准):GBK编码专门用来解决中文编码的,是双字节的 ...
- css,js,jquery的载入方式和属性控制
本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- jquery控制css的display属性(显示与隐藏)
jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...
- 转载一篇比较详细的讲解html,css的一篇文章，很长
转载自这里,转载请注明出处. DIV+CSS系统学习笔记回顾 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 ...
- 如何修改DEDECMS文章标题长度
方法一: 首先你要进入dedecms后台,系统——系统基本参数——其他选项——文档标题最大长度——在这修改为200或更大(其实200应该是足够了). 方法二: 进入phpmyadm ...
- Dede文章标题长度修改
方法一.首先你要进入dedecms后台,系统——系统基本参数——其他选项——文档标题最大长度——在这修改为200或更大(其实200应该是足够了). 方法二.进入phpmyadmin,点击dede_ar ...
随机推荐
- 让chrome打开手机网页
在chrome快捷方式上点右键: "C:\Program Files\Google\Chrome\Application\chrome.exe" -user-agent=" ...
- Django搭建及源码分析(一)
一.关于Django以下两个站点,在使用方面有详细说明. http://www.nowamagic.net/academy/part/13/286 http://www.w3cschool.cc/dj ...
- ubuntu 字体 android stuido 汉字 显示 方块
Ubuntu 12.04 LTS 中安装 windows 字体 ubuntu 中的中文字体看着总觉的有点不爽,于是百度了下,这里记录下怎么在 ubuntu 12.04 中安装 windows 字体 ...
- tomcat目录简介
http://www.cnblogs.com/kerrycode/p/3588816.html 主目录下面有bin.lib等目录 bin 存放Tomcat启动.停止服务程序以及一些其他脚本程序 lib ...
- 未能加载文件或程序集“Oracle.Web, Version=2.112.1.0, Culture=neutral, PublicKeyToken=89b483f429c47342”或它的某一个依赖项
当前系统环境描述: Win7x64+VS2012+IIS7 当前情况描述: 发布Web服务,在浏览的时候出现以下问题:未能加载文件或程序集“Oracle.Web, Version=2.112.1.0, ...
- 16）JAVA实现回调(Android，Swing中各类listener的实现）
熟悉MS-Windows和X Windows事件驱动设计模式的开发人员,通常是把一个方法的指针传递给事件源,当某一事件发生时来调用这个方法(也称为"回调").Java ...
- ContentProvider与ContentResolver使用【转】
这篇文章被转载而转载者未注明原文出处,在此未加上原文地址链接,本人向原作者致以歉意. 下面是文章内容: 使用ContentProvider共享数据: 当应用继承ContentProvider类,并重写 ...
- jquery 点击页面其他地方实现隐藏菜单功能
1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...
- deep learning学习环境Theano安装(win8+win7)
官网安装说明Installing Theano:http://deeplearning.net/software/theano/install.html#alternative-anacondace ...
- C 简易基础开发框架 - simple c
引言 一个为 简单高效而生的 简易跨平台的 纯C开发框架. githup上源码 https://github.com/wangzhione/sconsole_project 请容我细说 s ...