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 ...
随机推荐
- ArcGIS 10.1 如何连接数据库(转载)
ArcGIS 10.1如何连接数据库 最近在使用ArcGIS 10.1的数据库,在使用的过程中发现了跟以往不太一样的地方,在这里将自己的心得和想法跟大家分享一下(使用Postgresql),根据使用过 ...
- ubuntu18.04安装谷歌浏览器
sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list.d/ wget -q ...
- POI读取xls和xlsx
import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...
- 【Leetcode】【Easy】Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
- RabbitMQ 启动
1.使用Rabbit MQ 管理插件,可以更好的可视化方式查看Rabbit MQ 服务器实例的状态,你可以在命令行中使用下面的命令激活: C:\Program Files\RabbitMQ Serve ...
- RESTful架构及SOA架构简单解析
1.RESTful架构 本人也是刚接触ASP.NET开发,以下为自己简单的理解,并做了一些记录,表述不当或者错误之处还请指正,在此谢过. 首先,REST(REpresentational State ...
- Linux:301重定向 —— 将不带www的重定向到带www的
仓鼠又要手把手教啦 1.先看看自己有没有解析域名(带www和不带www的是两种域名形式!!) 位置:阿里云->域名->解析 2.进入解析,带www的说明你已经解析了www.ljjpm.co ...
- phoneGap的Android下编写phonegap 插件
一. javascript 端的编写 第一个参数 成功的回调函数 第二个参数 失败的回调函数 第三个参数 是插件的类名称,也就是后台java文件的类名 第四个参数 执行的 action 名称 ...
- hdu-3524 Perfect Squares---打表+找规律+循环节
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3524 题目大意: 求i^2 mod 2^n有多少可能 解题思路: 先打表,求出n较小的时候的数据 n ...
- JavaScript 初学备忘录
JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现 ...