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

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

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

导读我们经常遇到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 */
}

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

本文标签：

很赞哦！ (3)

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

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

暂无内容

暂无内容

相关教程

相关源码

(pc+wap)pbootcms网站模板蓝色小程序网站开发公司基于PbootCMS内核开发的营销型门户模板，为小程序开发公司、电商软件企业打造。采用HTML5自适应架构，实现PC与手机端数据实时同步展示查看源码
pbootcms模板(自适应)花店鲜花花卉园艺网站源码一款基于PbootCMS内核开发的花店鲜花配送与花卉园艺企业网站模板。该模板采用响应式设计，自动适配手机、平板等移动设备，确保用户在任何设备上都能获得优质浏览体验。查看源码
(PC+WAP)绿色草坪地坪操场pbootcms网站模板该模板基于PbootCMS内核开发，专为人造草坪、地坪施工企业设计，采用绿色主题呼应行业属性，实现PC与WAP端全栈响应式适配，确保跨设备无缝浏览体验。查看源码
pbootcms网站网络公司个人作品展示类网站源码(自适应)为网站建设公司、网络服务企业打造的响应式门户解决方案，基于PbootCMS内核深度开发。采用前沿自适应架构，无缝适配手机端交互与PC端展示需求。查看源码
工商注册财务代理记账类自适应pbootcms网站工商注册、财务代理记账企业打造的数字化门户模板，基于PbootCMS内核深度开发。采用前沿响应式架构，无缝适配手机端触控交互与PC端展示需求查看源码
pbootcms模板PC+WAP娱乐新闻资讯类博客网站源码该模板基于PbootCMS内核开发，专为娱乐新闻、健康生活类资讯网站设计，同时支持快速适配其他行业（如企业官网、博客门户等），仅需替换图文内容即可完成转型。查看源码

暂无内容

暂无内容

图文教程

分享笔记（共有 0 篇笔记）

大家在看

织梦cms收费哪几款cms可以免费商用？

暂无内容

本栏推荐

暂无内容

相关标签

大家喜欢

暂无内容