您现在的位置是：网站首页> 编程资料编程资料
字符串过长CSS截取多余文字并用省略号显示兼容IE和FF的单行溢出文本显示省略号-CSS教程-网页制作-网页教学网css实现字符串截断并加省略号示例通过纯CSS样式实现DIV元素中多行文本超长自动省略号css样式显示省略号自定义宽度超过隐藏显示省略标记CSS省略号text-overflow超出溢出显示省略号CSS 控制字符宽度省略号效果 兼容浏览器CSS文本超出div或者span时用省略号代替
2021-09-06
1033人已围观
简介 字符串过长，不雅观，如何实现多余文字街去掉并用省略号显示，苦思冥想多日，发现使用CSS就可轻松搞定，下面将经验心得与大家分享一番，望帮助更多的失足新手
最近才知道css也有这么叼炸天的一面~~~
做个类似论坛的页面，用户头像70px，但是用户名没法限定啊，英文中文都可以，你说他要是取个“我的名字好长呀，你该怎么办呢”，那老衲不就狂急了~~
幸好，老衲于不幸中的万幸中发现了css这么叼炸天的一面，以前一直不知道，写出来分享给大家
很简单，话不多说，直接上代码：
css里面如下设置：
a.name{
line-height: 30px;
text-align: center;
text-overflow:ellipsis;//让超出的用...实现
white-space:nowrap;//禁止换行
overflow:hidden;//超出的隐藏
display: block;
}
我是用a标签写的用户名，所以要display:block一下。
唔，很简单，不过很好用。（PS：不支持IE6！）
做个类似论坛的页面，用户头像70px，但是用户名没法限定啊，英文中文都可以，你说他要是取个“我的名字好长呀，你该怎么办呢”，那老衲不就狂急了~~
幸好，老衲于不幸中的万幸中发现了css这么叼炸天的一面，以前一直不知道，写出来分享给大家
很简单，话不多说，直接上代码：
css里面如下设置：
复制代码
代码如下:a.name{
line-height: 30px;
text-align: center;
text-overflow:ellipsis;//让超出的用...实现
white-space:nowrap;//禁止换行
overflow:hidden;//超出的隐藏
display: block;
}
我是用a标签写的用户名，所以要display:block一下。
唔，很简单，不过很好用。（PS：不支持IE6！）
相关内容
- div css布局命名时尽量避免下划线CSS3制作hover下划线动画CSS3简单带下划线跟随下拉菜单特效源码CSS3绘制有活力的链接下划线CSS中的下划线text-decoration属性使用进阶CSS3实现下划线跟随动画且背景色渐变菜单源码使用CSS去掉网页中超链接的下划线示例不可思议的CSS导航栏下划线跟随效果
- 用clearfix:after消除css浮动解决外部div不能撑开问题浅谈css清除浮动(clearfix和clear)的用法CSS中使用clearfix清除浮动的方法css中clearfix清除浮动的用法及其原理示例介绍css清除浮动clearfix:after的用法详解（附完整代码）css之clearfix的用法深入理解(必看篇)
- CSS控制图片和文字在同一行显示且对齐的3种方法CSS解决文字与图片不能水平居中对齐的问题同一行的图片和文字巧妙的居中对齐的解决方法
- css 调试方法与经验总结简要总结CSS编程中的响应式设计CSS的一些编程规范总结10个必备的CSS技巧总结CSS清除浮动方法总结CSS多浏览器兼容总结(个人经验)CSS样式的基础学习总结深入CSS3 动画效果的总结详解IE下css常见问题总结及解决CSS(Cascading Style Sheet)级联样式表常用术语总结CSS学习总结
- CSS3实现超慢速移动动画效果非常流畅无卡顿浅谈CSS3 动画卡顿解决方案
- CSS样式简单实现Table没有外边框只有内边框Dreamweaver中怎么让html网页中的table边框细线显示?一个属性border-collapse解决Table的边框问题CSS控制Table内外边框、颜色、大小示例css让table不显示边框的代码在火狐和谷歌浏览器中无效HTML table表格边框的控制详细说明用CSS设置表格Table的细边框的比较好用的方法 用CSS样式描述表格Table边框网页表格边框的设置方法网页表格表框制作技巧Table显示你要显示的边框代码
- 两侧列固定中间列变宽Div布局示例css实现文本和div居中对齐详细讲解示例通过position定位实现div底端对齐多个div中table的tdwidth设置一样也不法对齐图片在div中垂直和水平同时对齐的实现方法DIV和SPAN垂直居中对齐的实现方法将一个绝对定位的div水平垂直居中对齐div中加入span右对齐后出现换行显示两种解决思路div中子div在firefox ie 水平居中对齐 CSS让图片垂直居中和底端对齐的代码-CSS教程-网页制作-网页教学网html5 div布局与table布局详解
- 用CSS让按钮居中显示的思路及代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 一个通俗小故事告诉你溢出隐藏（overflow:hidden）失效的原因div 溢出隐藏 div文字溢出用点(省略号)代替css中position:relative和overflow:hidden之间的问题解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容IE6 Bug overflow:hidden失效IE overflow:hidden失效的解决方法IE8 css overflow:hidden不起作用
- IE6与CSS样式兼容问题汇总IE6中的position:fixed定位兼容性写法分享兼容IE6的网页最小最大宽度和最小最大高度css写法IE下去掉iframe边框兼容IE7\IE8\IE6以下CSS实现的div悬浮框并且兼容IE6的样式多种方法解决min-width 不兼容ie6的问题部分透明的蒙版效果实现思路(兼容ie6)图片垂直居中css写法兼容ie6div+css最小高度的实现代码(兼容ie6/ie7/ie8/firefox)
