写一些ul.li标签的时候比较有用.
看了Realazy.陈贤安
写的css载字
also看了他推荐的yahoo上面的牛人
写的,看的晕.XBL和JavaScript一起写..ft.
稍微解决了下Firefox下的问题.{firefox a little of 'BT'.}
-o-text-overflow针对opera的私有属性.
"li:not(p)"有些搞不懂.哪位高人帮俺解释下？
后面也是用的伪类:after增加省略号&float:left的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="陈磊,simx" />
<meta name="description" content="css文字截取,w3c" />
<title>css文字截取</title>
<style type="text/css">
<!--
body{
margin:50px auto 0 auto;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
a {text-decoration: none;color: #d90000;}
ul {width: 300px; padding:10px 15px 10px 25px;border: 1px solid #ccc;background: #efefef;}
li {width: 300px; height:28px; line-height:28px;}
li a {
display: block;
width: 300px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /*--4 opera--*/
text-overflow: ellipsis;}
/*--what's meaning? tell me y?...from <a href="http://realazy.org--" target="_blank">http://realazy.org--</a>*/
li:not(p)
{ clear: both;}
li:not(p) a
{max-width: 276px;float: left;}/*--firefox so BT--*/
li:not(p):after
{content: "...";float: left;width:25px;padding-left: 5px;color: #d90000;}
-->
</style>
</head>
<body>
<ul>
<li><a href="#" title="一个定位于不同语言国家的企业网站势必需要">一个定位于不同语言国家的企业网站言国家的企业网站言国家的企业网站势必需要</a></li>
<li><a href="#" title="离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标”也是企业无形资产的组成部分业形象和文化的重要">离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标”也是企业无形资产的组成部分业形象和文化的重要</a></li>
<li><a href="#" title="网站的目的消费者和受众的特点是什么国家的企业网站势必需要">网站的目的消费者和受众的特点是什么国家的企业网站势必需要</a></li>
<li><a href="#" title="一个定位于不同语言国家的企业网站">一个定位于不同语言国家的企业网站</a></li>
<li><a href="#" title="一个定位于的消费者和受众的特点是什么站势必需要">一个定位于的消费者和受众的特点是什么站势必需要</a></li>
<li><a href="#" title="离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标”也是企业无形资产的组成部分业形象和文化的重要">离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标”也是企业无形资产的组成部分业形象和文化的重要</a></li>
</ul>
</body>
</html>
转自:http://www.v4uu.com/blog/default.asp?cateID=5
分享到：
相关推荐
CSS 文字截取功能实现代码 在 Web 开发中，实现自动截取文字是一种常见的需求，通常需要使用后台程序或 JavaScript 来实现。但是，这篇文章将介绍如何使用 CSS 实现自动截取文字，不需要后台程序和 JS 的使用。 ...
【纯 CSS 实现多行文字截断功能】 在前端开发中，尤其是在响应式设计中，有时我们需要对标题或内容进行多行文字截断，以适应不同的屏幕尺寸。本文将详细介绍如何仅使用 CSS 来实现这一功能，同时兼顾兼容性和响应式...
截取字符串一般是用js或者后台语言来实现，其实使用CSS也是可以实现此效果的。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=...
以下将详细解释如何通过CSS截取字符实现文字的自动截断隐藏溢出文本，以及相关的关键知识点。 ### CSS截取字符实现文字自动截断隐藏溢出文本 为了实现文字的自动截断隐藏溢出，可以采用CSS的`text-overflow`属性。...
"截取指定长度的字符串"这个主题涉及到的是如何从一个字符串中提取出特定长度的部分。这在处理用户输入、数据展示、信息提取等多个场景中都非常常见。接下来，我们将深入探讨这个知识点。 首先，让我们明确什么是...
在CSS（层叠样式表）中，我们有时需要对超出容器宽度的文字进行截断，以保持页面布局的整洁。本文将详细介绍三种常见的CSS方法来截取字符并隐藏溢出的文本。 1. **使用`overflow`和`text-overflow`属性** 当你希望...
在本篇文章中，我们将探讨如何使用CSS来截取多余的文字并显示省略号。 首先，关键的CSS属性有三个：`text-overflow`, `white-space` 和 `overflow`。 1. `text-overflow` 属性：这个属性主要用于控制当内容溢出一...
本压缩包"js图片截取、缩放、文字选取.zip"包含了一系列与JavaScript相关的实用技术，主要集中在图像处理和文本操作上。以下是这些功能的详细说明： 1. **js图片剪裁**： 图片剪裁是Web应用中常见的功能，允许用户...
如何通过CSS实现文字图标 /*图标样式*/ .nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px; background-color: #b3b4c5; vertical-align: ...
在网页截取的过程中，工具会将网页的HTML、CSS和JavaScript等元素转化为静态图像，包括文字、图片、链接等各种网页元素。这使得用户可以在没有网络连接的情况下查看和分享截取的网页内容。 "web2pic"这个文件名可能...
该系统支持文字截取，意味着它能捕捉到网页上的文本信息，包括HTML源代码、JavaScript代码、CSS样式等，这对于网站分析和内容抓取非常有用。图片和Flash截取功能则有助于收集网页中的图像资源和多媒体内容，这对于...
CSS（层叠样式表）是用于控制网页元素外观的一种语言，其中颜色代码用于定义元素的背景色、文字色等。"截取颜色takecolor"能够帮助设计师精确地选取屏幕上的颜色，快速得到十六进制或RGB形式的CSS颜色代码，如#...
但这通常不适用于复杂的截取需求，因为CSS3的`clip-path`不支持像素级别的选择。 对于更复杂的需求，比如旋转、缩放和多边形截取，可以考虑使用第三方库，如JS-cropper。JS-cropper是一个轻量级的JavaScript图片...
或者是利用程序截取一段文字在头部的办法。今天终于找到一种写法，就是用一个宽度为1的空标签的高度来占位，然后图片清除浮动，来制造出这个顶部文字环绕的效果。啥都不说了，看代码 <!DOCTYPE html PUBLIC “-/...
有时，我们可能还需要结合 CSS 来控制被截断文本的样式，比如设置 `overflow: hidden` 和 `text-overflow: ellipsis` 来让浏览器自动处理超出部分的省略号，但这通常只适用于单行文本，对于多行文本的截取，...
以下是对标题多行文字截断的几种常见方法的详细解释。 首先，我们通常使用的单行文本截断是通过`text-overflow: ellipsis`属性来实现的。这个属性配合`white-space: nowrap`和`overflow: hidden`可以很好地在单行...
110. 推荐实用jquery图片截取代码下载 111. 站长推荐jQuery产品展示专用的图片幻灯+缩略图、左右控制按钮实例下载 112. 站长推荐一款非常精美的jQuery 1.4漂亮相册程序打包给大家 113. 站长素材推荐jQuery带箭头...
这段代码将对选择的所有`elements`元素应用文字截取功能，其中配置了长度限制为50个字符，显示更多时的按钮文本为“展”，隐藏更多时的按钮文本为“缩”，并且截取后替换的内容为空。 #### 插件代码复用与维护 开发...