CSS实现DIV超长截断,并显示...
DIV显示内容有时会超长,并把页面撑的很难看,
以前的做法是在JS中,或者后台判断其长度,过长就截断,
但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值,
展示的效果也不好。利用CSS提供的方法,可以完美的解决该问题。
.project-Name{
width:280px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
这里宽度是必须定义的,
overflow:hidden;表示超长部分不显示
text-overflow:ellipsis;表示超长显示...
white-space: nowrap;表示不折行显示 该样式也可以应用于其他一些标签,最好在可以加TITLE的标签上使用,
因为可以加TITLE显示全部的信息哦
CSS实现DIV超长截断,并显示...的更多相关文章
- CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- WPF TextBlock 文字超长截断并显示省略符号
<TextBlock x:Name=" FontSize="9pt" Margin="0 2 0 0 " VerticalAlignment=& ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- css:多个div在同一行显示
使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...
- 用CSS让字体在一行内显示不换行(收藏)
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): .text- ...
- 用CSS让字体在一行内显示不换行
青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小 当一行文字超过DIV或者Table的宽度的时候,浏览器 ...
- CSS控制字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...
随机推荐
- 用git管理自己读的书
福昕阅读器,可以方便地做书签和备注.使用git去管理图书和示例代码,一方面能够很好地保存这些资料,方便查找:另外一方面,无论在家,还是在公司,都能很好地同步自己学习的进度. 福昕阅读器5(视图--&g ...
- JLINK通过JFLASH烧写bin文件报错处理方法
错误原因:烧写开始地址出错,打开BIN文件后弹出的设置开始地址不正确不能为0 解决措施:用J-FLASH LITE或者将开始地址设置成正确的地址(KEILMDK中IROM1的开始地址
- ThinkPHP 关于namespace的事儿
如题,php通常是不允许函数重名的,例如a.php中有一个getName(),b.php中有一个getName(),在require_once a.php和b.php后就会报getName重复定义的错 ...
- 仅个人兴趣,自己通过搜索他人的成果,结合自己的理解,来分析discuz的代码。
仅个人兴趣,自己通过搜索他人的成果,结合自己的理解,来分析discuz的代码. discuz 版本: 3.2
- Esfog_UnityShader教程_遮挡描边(原理篇)
咳咳,有段时间没有更新了,最近有点懒!把不少精力都放在C++身上了.闲言少叙,今天要讲的可和之前的几篇有所不同了,这次是一个次综合应用.这篇内容中与之前不同主要体现在下面几点上. 1.之前我们写的都是 ...
- Netty是什么?
Netty是什么? 本质:JBoss做的一个Jar包 目的:快速开发高性能.高可靠性的网络服务器和客户端程序 优点:提供异步的.事件驱动的网络应用程序框架和工具 通俗的说:一个好使的处理Socket的 ...
- [Android]android studio预览视图时报错
报错信息: 详细报错信息: java.lang.NoSuchMethodError: com.android.ide.common.rendering.api.LayoutlibCallback.ge ...
- thinkPHP环境搭建小记
php一直以来都被人诟病,说什么设计得很糟糕,有种你别用啊,不然就别bb了.最近,森哥在去年暑假学习了php基础和mvc模式的基础上准备用尝试一下国产ThinkPHP框架. 1.搭建LAMP环境 我实 ...
- vi和vim 的常用操作
到文件末尾: ESC + shift G : 到文件头: G + G: 整块模式 快捷键 [不使用鼠标,来选择块] v 字符选择,会将光标经过的地方反白选择! V ...
- 微信小程序--摸索之旅
首先 奉上腾讯官方文档 方便参考:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 个人认为没说啥特别有用的信息(可能是我看的太粗糙了) ...