<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
body{font-size:12px; line-height:18px;}
.list1{ width:120px;}
.list1 li{ height:18px; overflow:hidden;padding-left:12px; background:transparent url(ico.gif) no-repeat 4px 6px; position:relative}
.list1 li a{ display:block; padding-right:8px; background:url(pot.gif) no-repeat right top; word-break:break-word; position:relative;zoom:1;}
.list1 li a span{ display:block; width:1em; height:18px; position:absolute;right:0;bottom:0; background-color:green; overflow:hidden;}
</style>
</head>
<body>
<ul class="list1">
<li><a href="#">我就是要测试一下下我就是要测试一下下<span></span></a></li>
<li><a href="#">我就是要测试一下下我就是要测试一下下<span></span></a></li>
<li><a href="#">我就是要测试一下下我就是要测试一下下<span></span></a></li>
<li><a href="#">我就是要测试一下下我就是要测试一下下<span></span></a></li>
</ul>
</body>
</html>
.list1 li{ height:18px; overflow:hidden;padding-left:12px; background:transparent url(ico.gif) no-repeat 4px 6px; position:relative}
避免IE的一个bug
分享到：
相关推荐
视频与票的图标跟在标题后面显示，当标题过长时icon显示到省略号…后（textview省略号显示，图标自动靠后）。 二、问题解决 TextView可以通过 android:ellipsize=end android:singleLine=true实现单行省略， 但是...
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
"jquery带省略号的分页"正是其中一种高级的分页效果，它能够帮助用户更优雅地处理大量的数据，提高用户体验。 首先，我们要理解“带省略号分页”的概念。这种分页方式通常指的是当页面的页码过多时，不将所有的页码...
5. **属性设置**：为了让用户能够调整省略号的显示，可以添加新的成员变量和函数，比如设置最大显示字符数或是否开启省略号模式。 6. **注册控件类**：最后，需要使用`AfxRegisterWndClass()`或`AFX聚合注册`注册...
"前端样式 分页中间是省略号"这个标题表明我们讨论的是一个关于分页组件的设计，其中在分页条目之间使用了省略号来表示中间的页面数。这种设计通常用于当页面数量过多，无法全部显示时，用省略号来简化用户界面，...
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号，但鼠标可以选择文字，酷吧……
"Android动态点点省略号闪烁效果的等待控件"是一种常见的设计，它通过连续显示“...”来表示程序正在进行后台操作，同时通过动态闪烁增加用户的交互感，提高用户体验。本篇将详细介绍如何实现这样的控件。 首先，...
而"js分页带省略号"指的是在分页插件中，为了简洁地展示页码，通常会采用省略号来表示中间的页码，只显示首尾部分和当前页附近的页码，这种设计既节省了空间，又保持了用户体验。 首先，我们来理解一下分页的基本...
"jsp ajax js 实现省略号分页"这一主题，就是关于如何在JSP页面中利用AJAX和JavaScript技术实现具有省略号效果的分页功能。这里我们将详细探讨这一技术实现的各个环节。 首先，我们了解**JSP（JavaServer Pages）**...
省略号样式的 动效，作为loading状态的过渡，自定义控件
在网页设计中，有时我们需要对过长的文字内容进行截断，并用省略号（...）来表示被省略的部分。这种技术在HTML和CSS中可以通过简单的设置实现。本主题主要探讨如何利用HTML和CSS实现超出字符数后显示省略号的效果。 ...
jquery实现超出部分省略号显示
8.如何用省略号显示字符串的其余部分？（Visual C++编程 源代码）8.如何用省略号显示字符串的其余部分？（Visual C++编程 源代码）8.如何用省略号显示字符串的其余部分？（Visual C++编程 源代码）8.如何用省略号...
使用Bootstrap实现分页，并且当页码过多时使用省略号，这篇文章有样式的简单演示：https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式，不同的项目有不同的样式风格，只是提供分页...
当我们需要展示大量文本但受限于有限的空间时，可以利用CSS来实现文字的多行省略效果，让超出部分以省略号（...）的形式呈现。在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的...
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width，但是可以设置table的width
在某些场景下，我们可能希望限制`TextView`显示的文本长度，并在超出时使用省略号“...”来表示被截断的部分。然而，有时在设置`ellipsize="end"`后，省略号却并未正常显示，这可能是由于一些特定原因造成的。本文将...
js 将多出的字符串用省略号代替 不是一般的那样获取字符串长度和字符字节来判断哦 ^_^ ；基本思路 ；很简单
在网页设计中，让`<div>`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来，我们将深入探讨如何实现这个效果。 首先，我们要解决的是...
纯css实现，亲测html5、vue、jsp适用，状态后面省略号动态展示，速度可调