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 ...
随机推荐
- leetcode-word break-ZZ
题目, 反正就是一个string,要不自己在字典里,要不切几刀,切出来的每个词都在字典里 ——————————————————————————————————————————————————————— ...
- Access 64-bit HKLM\Software Registry by 32-bit C#.NET Application
http://www.codeproject.com/Articles/1003177/Access-bit-HKLM-Software-Registry-by-bit-Csharp-NE While ...
- 【Leetcode】【Medium】Binary Tree Zigzag Level Order Traversal
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- Python初学者第四天 二进制运转换
4day 1.二进制运算 a.十进制转换二进制 342 转换成二进制 342 101010110 Python提供了一种简单的计算二进制的方法:bin() b.文字转换成二进制 ASCII码表 GB ...
- WAKE-WIN10-SOFT-环境
操作系统名称 Microsoft Windows 10 专业版版本 10.0.14393 版本 14393其他操作系统描述 没有资料操作系统制造商 Microsoft Corporation系统名称 ...
- CIKM 2013推荐系统论文总结
这几天在家没事,介绍几篇CIKM上关于推荐系统的文章, Personalized Influence Maximization on Social Networks Social Recommenda ...
- WK 与 JS 的那些事
苹果在iOS 8中推出了 WKWebView,这是一个高性能的 web 框架,相较于 UIWebView来说,有巨大提升.本文将针对 WKWebView 进行简单介绍,然后介绍下如何和 JS 进行愉快 ...
- luogu P4135 作诗
嘟嘟嘟 郑重声明:我的前几到分块题写法上都有点小毛病,以这篇为主! 这道题感觉也是分块的基本套路,只不过卡常,得开氧气. 维护俩:sum[i][j]表示前 i 块中,数字 j 出现了多少次,ans[i ...
- 禁止查看网页源代码和F12
function disableInfo() { document.onkeydown = function() { var e = window.event || arguments[0]; //屏 ...
- Eclipse安装Sonarlint插件
这里安装的是Sonarlint3.6.插件安装非常简单.插件比Sonar更为简单快捷. 一.首先通过点击Eclipse上方Help菜单会出现一个下拉列表,点击其中的Eclipse MarketPlac ...