您现在的位置是：首页 > cms教程 > DedeCMS教程DedeCMS教程

CSS控制单行长度和字符个数的方法兼容各大浏览器

钱铮友2024-02-04DedeCMS教程已有人查阅

导读我们经常遇到div宽度固定，单行字符有限，文字信息显示不全，影响阅读性和SEO优化，有没有让你抓狂呢？下面就大家一个CSS控制单行长度和字符个数的方法兼容各大浏览器

我们经常遇到div宽度固定，单行字符有限，文字信息显示不全，影响阅读性和SEO优化，有没有让你抓狂呢？下面就大家一个CSS控制单行长度和字符个数的方法兼容各大浏览器，隐藏多余字符，用“...”代替。
兼容性：
IE6测试兼容，IE7测试兼容，，IE8测试兼容，IE9测试兼容，Chrome测试兼容，FireFox测试兼容，Opera测试兼容。
CSS代码：

.mubanzhijia li{
/* 标签可以定义多个，不过请注意width属性，较好将width属性去掉 */
display:block;/*定义为块级；这个属相很重要，没有这个属性，很难实现单行宽度的效果*/
width:100%;/*要显示文字的宽度 提醒：可以将此属性剔除，然后就可以多标签的实现单行控制了*/
float:left;/*左对齐*/
overflow:hidden;/*超出的部分隐藏起来。*/
whitewhite-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
}

按上面的方法就可解决隐藏多余字符，用“...”代替了。

本文标签：

很赞哦！ ()

上一篇：dede织梦缩略图拉伸变形的解决方法

下一篇：修改织梦当前位置导航面包屑的方法

图文教程

相关源码

(自适应)驾校培训学车活动免费pbootcms源码下载本模板基于PbootCMS内核开发，为驾校培训行业打造，具备完善的招生展示、课程预约、教练团队展示等功能模块。响应式设计适配各类移动终端，数据实时同步管理，助您高效开展线上业务。查看源码
(PC+WAP)院校学院职业学校机构协会网站开源源码下载本模板基于PbootCMS系统开发，为高等院校、职业学校等教育机构设计，特别适合展示学校概况、院系设置、招生信息等内容。采用双端适配技术，确保在PC和移动设备上都能获得良好的浏览体验。查看源码
(自适应响应式)html5文章资讯新闻博客pbootcms网站模板下载本模板基于PbootCMS系统开发，为新闻资讯、博客类网站设计，特别适合各类文章内容的发布与管理。采用响应式技术，确保在不同设备上都能获得良好的阅读体验。查看源码
(PC+WAP)餐饮奶茶美食小吃招商加盟pbootcms模板源码下载为茶饮烘焙、小吃快餐等餐饮品牌打造的招商加盟系统，助力品牌快速拓展市场；双端pc+wap设计呈现加盟政策对比表。支持后台实时更新菜品图片、加盟费用等关键信息。查看源码
(PC+WAP)蓝色五金机械设备营销型网站源码下载基于PbootCMS内核开发的营销型企业网站模板，为五金机械设备类企业打造，通过标准化数字展示提升客户转化率。模板采用模块化设计，可快速适配机床工具、建筑五金、阀门管件等细分领域。查看源码
(自适应响应式)绿色环保材料设备科技类营销型网站pbootcms源码下载本模板基于PbootCMS开发，主要面向环保设备、环保材料及相关科技企业。采用HTML5+CSS3技术构建，具备响应式特性，确保在各类设备上均有良好展示效果。查看源码