`
zhuge
  • 浏览: 41079 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

兼容浏览器的CSS控制字符宽度省略号效果

    博客分类:
  • css
阅读更多
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>

///底下是内容

<ul>
<li><a  href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">使用CSS最佳习惯 </a></li>
<li><a  href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">说说XHTML中的alt属性和title属性 </a></li>
<li><a  href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">IE中伪类:hover的使用及BUG </a></li>
<li><a  href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">52CSS公告</a></li>
</ul>
分享到:
评论

相关推荐

    CSS 控制字符宽度省略号效果 兼容浏览器

    兼容浏览器的CSS控制字符宽度省略号效果,是非常实用的,由于FF对溢出显示省略号的属性支持不好。因而在进行编码时,应用到了一个HACK和FF的私有属性,大家在学习时注意区别。 看下面的HTML代码: &lt;ul&gt; &lt;li&gt;&lt;a&gt;使用...

    纯css控制超出部分省略号显示

    ### 纯CSS控制超出部分省略号显示 在网页设计与开发中,经常会遇到文本长度不可预知的情况,特别是当容器的宽度固定时,如何优雅地处理超出部分的文本展示就显得尤为重要。本文将详细介绍如何仅使用CSS来实现文本...

    HTML+css 超出字符省略号表示

    接下来,我们需要在CSS中应用样式来实现省略号效果。通常,我们会使用`white-space`、`overflow`和`text-overflow`这三个属性。`white-space`用于控制空白符的处理,`overflow`决定超出内容的处理方式,`text-...

    用css使单行超出指定宽度的内容切去并在结尾出现省略号

    【知识点详解】 ...总结,通过CSS我们可以实现单行文本超出指定宽度后自动截断并显示省略号的效果,但在不同浏览器中可能需要不同的解决方案。了解这些技巧有助于我们创建更加兼容和美观的网页布局。

    用CSS实现超长字段被省略的简单方法.rar

    在HTML结构上,通常我们会将需要应用省略号效果的文本放在一个带有固定宽度的容器内,例如: ```html 这里是一段很长很长的文本,可能会超过容器的宽度,我们需要把它省略掉... ``` 然后在CSS中,为`.ellipsis-...

    css实现字符串截断并加省略号示例

    CSS(Cascading Style Sheets)提供了强大的样式控制能力,其中包括字符串截断并添加省略号的功能。这个功能在显示文章标题、列表项或者摘要时特别有用,可以避免内容溢出并保持页面布局整洁。本文将详细讲解如何...

    js文字超出省略号特效

    在网页设计中,为了美观和用户体验,经常需要对过长的文字进行省略处理,尤其是在有限的空间内展示内容。...理解和掌握这些知识点,将有助于我们更好地实现文本溢出时的省略号效果,提升网页的用户体验。

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    综上所述,通过设置 `text-overflow`、`overflow` 和 `white-space` 属性的组合,我们可以控制CSS中文本溢出的显示方式,使内容在超出指定宽度后能够隐藏多余部分,并用省略号来提示用户还有更多内容。这在进行Web...

    如何通过CSS样式设置单元格显示内容的长度.doc

    这段代码创建了一个红色背景的表格,设置了固定布局,并对单元格应用了相应的CSS样式,使得文本超出100像素宽度时显示省略号。 需要注意的是,`table-layout: fixed`虽然提高了表格的加载速度,但也可能会影响到...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf

    总结来说,CSS提供了多种方式来截取和处理溢出的文本,根据不同的需求和浏览器兼容性,可以选择合适的方法来实现。在实际应用中,设计师和开发者需要权衡灵活性、可读性和浏览器兼容性,以找到最适合项目需求的解决...

    字符串过长CSS截取多余文字并用省略号显示

    在网页设计中,有时我们需要对过长的字符串进行截取,并在结尾处添加省略号以保持布局的整洁和美观。CSS(Cascading Style Sheets)提供了一种优雅的方式来实现这个功能,尤其对于动态生成的内容,如用户昵称或者...

    CSS 控制标题长度,不再需要切字符串函数了 ^_^.txt

    ### CSS控制标题长度,不再需要切字符串函数 在网页设计中,经常遇到标题或文本过长而需要进行截断的情况。传统的做法是通过JavaScript或其他脚本语言来实现文本的截断,但这种方式不仅增加了页面的复杂性,还可能...

    javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

    本文介绍了一种使用JavaScript来实现超出容器后显示省略号效果的方法,这种方法能够兼容处理一行或多行文本的情况。在介绍该方法之前,首先需要了解几个关键概念: 1. CSS中的文本溢出处理: - `text-overflow: ...

    css自动截取指定长度字符串,结尾显示... 支持FF浏览器

    本文将详细介绍如何利用CSS实现对指定长度的字符串进行自动截取并在末尾显示省略号(...),同时确保该方法能够良好地支持Firefox等主流浏览器。 #### 实现原理与代码示例 ##### 1. CSS属性介绍 为了实现文本的...

    Css测试,li超出部分的汉字隐藏

    `可以在文本溢出时显示省略号,但这通常只对英文和数字有效,对汉字可能不起作用,因为汉字无法被截断成单个字符。 ```css li { white-space: nowrap; /* 防止文本换行 */ overflow: hidden; text-overflow: ...

    table中的超长字符串用省略号表示的css样式

    如果没有设定宽度,浏览器将自动分配宽度,可能无法达到预期的省略号效果。 - **适应不同浏览器**:虽然这个方法在大多数现代浏览器中都能正常工作,但为了兼容性,可能需要添加一些前缀,如 `-webkit-`,以确保在旧...

    CSS强制文本在一行内显示若有多余字符则使用省略号表示

    CSS(层叠样式表)提供了一种方法来强制文本在一行内显示,并且当文本超出容器宽度时,使用省略号(...)来表示被截断的部分。这个功能主要通过`text-overflow`属性来实现,它与`white-space`和`overflow`属性配合...

    让超出DIV宽度范围的文字自动显示省略号...

    为了解决这个问题,可以使用CSS中的`text-overflow`属性来实现当文本超出容器宽度时自动显示省略号(`...`),从而达到良好的视觉效果。 #### CSS 属性详解 ##### text-overflow: ellipsis; `text-overflow`属性...

Global site tag (gtag.js) - Google Analytics