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:文章标题过长时,使用省略号的更多相关文章

  1. CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示

    首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后 ...

  2. CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

    为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:

  3. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  4. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

  5. css实现文本过长时自动添加省略号

    1. 效果 2. Html <div id="main_app_content" class="container"> <div class= ...

  6. css实现文字太长,显示省略号

    /*显示为省略号*/ overflow:hidden;/*隐藏*/  white-space:nowrap;/*文本不进行换行*/text-overflow:ellipsis;/*省略号*/ /*强制 ...

  7. kendo ui treeview 标题太长时的自动换行

    添加以下CSS即可: div.k-treeview{white-space: normal;}

  8. 如何使用css和jquery控制文章标题字数?

    如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! < ...

  9. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

随机推荐

  1. 是否应该开启WebView硬件加速?

    android webview 在3.0+后显示flash要启用硬件加速,开启硬件加速也能够使绘制更加平滑. 开启硬件加速是在manifest中加入: android:hardwareAccelera ...

  2. SQL Server ->> 斐波那契数列(Fibonacci sequence)

    斐波那契数列(Fibonacci sequence)的T-SQL实现 ;WITH T AS ( AS BIGINT) AS curr, CAST(NULL AS BIGINT) AS prv UNIO ...

  3. 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 ...

  4. Linux入门-2 VIM基础

    启动与退出 模式 进入插入模式 命令 删除.复制.粘贴 光标控制 查找与替换 EX模式 启动与退出 vim只启动vim vim <filename>打开文件,如果不存在则新建 模式 Nor ...

  5. zabbix 添加 ROS 软路由监控 WinBox设置

    如图设置

  6. macbook pro 2016 2017 15寸 雷电3 外接显卡 epu 简单教程(不修改UEFI)

    雷电3外接显卡效果还不错,但是除了akitio node 其他厂家并不会维护自己的固件来适配新机型,我自己买的mbp 2016 15''就出现了和AORUS Gaming Box 1070不兼容的问题 ...

  7. python UI自动化实战记录十:执行测试及测试报告

    使用简单的unittest.TextTestRunner. 思路: 1 在report目录下创建当日测试报告目录 20190113 2 创建测试报告文件 f = 时间戳.txt 3 加载测试集,运行测 ...

  8. 九.mysql数据库多实例安装mysqld_multi [start,stop,report]

    经常应为系统硬件短缺,导致需要在同一台硬件服务器上面安装多个mysql实例.之前的文章四·安装mysql-5.7.16-linux-glibc2.5-x86_64.tar.gz(基于Centos7源码 ...

  9. 【转】2013 PHP技术峰会《Bug Free的PHP开发实践分享》摘录

    要想代码写的好,前提配置做的好 error_reporting  =  E_ALL | E_STRICT display_errors = 测试机设置为 On,生产机设置为 Off display_s ...

  10. UVA151 Power Crisis

    嘟嘟嘟 这道题被评为紫题完全是在假(虽然我也跟风评了紫题),顶多黄题难度. 评黄题的主要原因是得知道约瑟夫递推公式,即fn = (fn - 1 +m) % n.表示n个人报数最后的获胜者,需要注意的是 ...