您现在的位置是：首页 > 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织梦缩略图拉伸变形的解决方法

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

图文教程

相关源码

帝国CMS中小学生知识点试题练习题考试源码下载基于帝国CMS后台管理系统，支持在线修改联系信息、网站参数等配置，操作流程简洁明了。专注于中小学教育领域，集成知识点总结、试题练习、考试资讯等学习资源，为师生提供全面的在线学习支持与服务。查看源码
(PC+WAP)铝合金门窗定制pbootcms网站模板源码为铝合金门窗、定制门窗企业打造的高性能网站模板，基于PbootCMS开源内核开发，采用HTML5自适应架构，PC与手机端数据实时同步，覆盖全终端用户交互场景。查看源码
(自适应响应式)html5蓝色智能水表营销型网站pbootcms模板下载PbootCMS内核开发，为智能水表企业打造的营销型网站解决方案，本模板基于PbootCMS内核开发，为智能水表及相关行业企业设计，采用HTML5+CSS3技术构建，具有响应式布局。查看源码
(自适应)平面设计网络工作室个人作品展示网站模板免费下载基于PbootCMS内核开发的响应式网站模板，为设计工作室、创意机构打造的作品展示解决方案。通过模块化布局与极简交互设计，呈现设计作品的视觉细节，支持作品分类、案例解析等多维度展示方式。查看源码
(PC+WAP)楼承板建筑工程合金钢铁材料pbootcms网站源码下载为楼承板生产商及建筑工程企业设计的响应式网站模板，采用PbootCMS内核开发，同步适配电脑与移动设备浏览。通过模块化结构展示工程案例、产品参数等专业内容，帮助建筑建材企业建立标准化数字展示平台，提升行业专业形象。查看源码
(自适应)大气办公用品耗材供应打印机产品维修网站模板下载基于PbootCMS系统开发的响应式网站模板，为营销技术博主、数字产品评测者设计。采用前沿的响应式技术，确保内容在手机端和桌面端都能获得较佳阅读体验，帮助用户高效展示技术文章和产品分析。查看源码