您现在的位置是：首页 > 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模板(PC+WAP)传媒广告影视公司网站源码基于PbootCMS内核开发的全自适应传媒文化网站模板，为影视公司、广告传媒企业打造，同时支持多行业快速适配。通过替换文字图片即可转换为其他行业网站查看源码
(响应式H5)帝国cms7.5文章新闻博客模板带会员中心本模板基于帝国CMS内核开发，为新闻资讯、个人博客及作品展示类网站设计。采用响应式布局技术，确保在手机、平板和电脑等不同设备上都能获得良好的浏览体验。查看源码
(PC+WAP)院校学院职业学校机构协会网站开源源码下载本模板基于PbootCMS系统开发，为高等院校、职业学校等教育机构设计，特别适合展示学校概况、院系设置、招生信息等内容。采用双端适配技术，确保在PC和移动设备上都能获得良好的浏览体验。查看源码
(自适应响应式)HTML5磁电机械设备蓝色营销型网站pbootcms模板本模板为磁电设备行业设计，采用蓝色营销风格，突出工业设备的专业性和技术感。模板结构清晰，能够有效展示磁电设备的技术参数、应用场景和企业实力，帮助客户快速了解产品特点和公司服务。查看源码
(PC+WAP)高端餐饮美食小吃加盟网站模板下载pbootcms本模板基于PbootCMS内核开发，为餐饮美食品牌加盟、小吃连锁企业量身打造。通过精致的美食视觉呈现与加盟业务流程展示，帮助餐饮企业建立专业线上门户，实现品牌形象与加盟业务的双重展示。查看源码
(PC+WAP)家居装饰家装建材营销型网站pbootcms模板下载本模板基于PbootCMS开发，主要服务于家居装饰、建材及相关行业。采用现代化设计风格，同时适配PC和移动设备访问。模板结构清晰，突出展示家装案例和建材产品，帮助企业在线上建立专业形象，有效展示产品与服务优势。查看源码