css:文章标题过长时,使用省略号
html代码
<ul>
<li><a href="" target="_blank">我是文章1,现在标题过长,使用css加省略号</a></li>
<li><a href="" target="_blank">文章2</a></li>
<li><a href="" target="_blank">文章3</a></li>
</ul>
css代码
ul{
width: 160px;
background: silver;
/*列表样式位置改为内部,使image生效*/
list-style-position: inside;
list-style-image: url("../source/bullet.png");
}
li{
/*不换行*/
white-space: nowrap;
/*溢出的话,隐藏*/
overflow: hidden;
/*文本溢出时,是否....*/
text-overflow: ellipsis;
}
显示效果

css:文章标题过长时,使用省略号的更多相关文章
- CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示
首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后 ...
- CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号
为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...
- css实现文本过长时自动添加省略号
1. 效果 2. Html <div id="main_app_content" class="container"> <div class= ...
- css实现文字太长,显示省略号
/*显示为省略号*/ overflow:hidden;/*隐藏*/ white-space:nowrap;/*文本不进行换行*/text-overflow:ellipsis;/*省略号*/ /*强制 ...
- kendo ui treeview 标题太长时的自动换行
添加以下CSS即可: div.k-treeview{white-space: normal;}
- 如何使用css和jquery控制文章标题字数?
如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! < ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
随机推荐
- 任务九:使用HTML/CSS实现一个复杂页面
任务目的 通过实现一个较为复杂的页面,加深对于HTML,CSS的实战能力 实践代码的复用.优化 任务描述 通过HTML及CSS实现设计稿 设计稿PSD文件(点击下载),效果如 效果图(点击打开) 整个 ...
- 1 如何使用pb文件保存和恢复模型进行迁移学习(学习Tensorflow 实战google深度学习框架)
学习过程是Tensorflow 实战google深度学习框架一书的第六章的迁移学习环节. 具体见我提出的问题:https://www.tensorflowers.cn/t/5314 参考https:/ ...
- css positioning计算和jquery对应函数
- Asp ose.Tota l for .NET 2015
How to license Aspose.Total for .NET products Add "License.cs" [C#] OR "License.vb&qu ...
- Python函数式编程(进阶2)
转载请标明出处: http://www.cnblogs.com/why168888/p/6411915.html 本文出自:[Edwin博客园] Python函数式编程(进阶2) 1. python把 ...
- EOJ-3300 奇数统计(高维前缀和)
题目链接: https://acm.ecnu.edu.cn/problem/3300/ 题目大意: 给n个数,求在n个数中选两个数(可重复),使得这两个数的组合数是奇数,求总共有多少种取法. 解题思路 ...
- 系统架构的定义(与系统)-architecture
architecture⟨system⟩ fundamental concepts or properties of a system in its environment embodied in i ...
- 显卡 GPU 关系
https://zhidao.baidu.com/question/1238935513507031339.htmlGraphic Processing Unit,意思就是图形处理器啊,显卡的由GPU ...
- 牛客网多校训练第一场 F - Sum of Maximum(容斥原理 + 拉格朗日插值法)
链接: https://www.nowcoder.com/acm/contest/139/F 题意: 分析: 转载自:http://tokitsukaze.live/2018/07/19/2018ni ...
- Kali Linux重设root密码
许久不用的Kali,某天打开竟忘了密码! 网上的方法颇为简单,遂准备亲自试一下. #光标移动到第二行的“恢复模式”,按E进入[编辑模式] ...