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;
}

显示效果

原文地址:https://www.cnblogs.com/xutaowang/p/9097789.html

时间: 2024-11-09 09:41:34

css:文章标题过长时,使用省略号的相关文章

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

首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后在表头th中设置每列的宽度 <table style="table-layout:fixed"> <th width="10%">Title01</th> <th width="20%">Title02

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

为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果: 原文地址:https://www.cnblogs.com/zzz-knight/p/11644912.html

使用CSS处理标题过长,自动截断,兼容响应式布局

应用场景描述 例如PHP 从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局.处理方法如下: PHP 字符串截取 JS 字符串截取 CSS 属性处理(推荐) CSS 属性处理方法 html代码片段 <li > <span class="cut">商品标题商品标题商品标题商品标题商品标题商品标题</span> <span style="float: right;">9秒前</span> &l

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

一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 原文地址:https://www.cnblogs.com/baobao0205/p/11620418.html

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

如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! <html> <title>css控制字数</title> <head> <style type="text/css"> .dd { border: solid 1px gray; width:180px; overflow: hidd

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

我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } Html代码就不用写了,一个div 或者span class = "title"即可.

2017-3-14文章名 css解决标题背景 不显示文字

2017-3-14文章名 css解决标题背景 不显示文字 标签 text-indent: 100%; white-space: nowrap; overflow: hidden; 隐藏文字 以图代字

CSS自动截断表格内的长字符 以省略号显示

CSS自动截断表格内的长字符,以省略号显示,大家可能在一些网站看到过这样的效果,目的是让表格或布局更美观一些,但是不利于阅读,如果您可以能该属性加上title或链接的话那就利于网站体验了,您说是吗? <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上谷战

解决标题过长的CSS

不知道为什么大家用截取字符串的人很多呢.. <html> <head> <style type="text/css"> .divout { display: inline-block; white-space: nowrap; word-wrap: normal; width: 100%; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; -webki