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

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

图文教程

相关源码

(PC+WAP)智能机器人人工智能物联网自动化设备源码下载本模板基于PbootCMS内核开发，为智能机器人及传感器科技企业精心设计。采用现代化设计风格，突出科技感与专业性，多方位展示企业技术实力与产品优势。查看源码
(自适应)蓝色自动溶剂萃取仪器设备类网站pbootcms模板下载本模板为溶剂萃取设备、实验室仪器等精密仪器行业设计，采用PbootCMS内核开发，具有高度专业性和行业适配性。模板设计充分考虑了仪器设备行业展示需求，能够呈现各类精密仪器的技术参数、应用场景和解决方案。查看源码
(自适应)绿色宠物门诊兽医行业网站模板该绿色清爽风格网站模板专为宠物门诊与兽医诊所设计，基于PbootCMS内核开发，采用响应式布局确保手机、PC等多端体验一致，帮助宠物医疗机构高效构建线上服务平台。查看源码
帝国cms7.5女性护肤搭配美妆潮流网站源码带数据4.5G本模板专为女性美容护肤行业设计，提供美容护肤、发型设计、女性健康、时尚化妆、娱乐新闻、服饰搭配等女性潮流资讯内容展示。采用帝国CMS7.5开发，同步生成电脑端和手机端，满足用户对美容时尚信息的获取需求。查看源码
(自适应响应式)pbootcms食品零食店日化用品网站源码下载基于PbootCMS内核开发的响应式模板，为食品零食、日化用品等行业量身定制。该模板通过可视化设计展现产品特色，帮助企业快速搭建专业官网查看源码
帝国CMS7.5二次元COS漫展网站模板源码免费下载本模板基于帝国CMS 7.5版本深度开发，为二次元文化分享领域设计。采用UTF-8编码，支持中文内容展示，特别适用于COSPLAY作品展示、漫展信息发布等二次元相关内容的网站建设。模板结构清晰，布局合理，充分考虑了二次元用户群体的浏览习惯和审美需求。查看源码