`
pavel
  • 浏览: 930687 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css将超出的部分显示为省略号的方法(兼容火狐)

    博客分类：
  • css
CSSFirefoxHTMLCC++ 
阅读更多

 css将超出的部分显示为省略号的方法(兼容火狐)，有效部分已用颜色标出。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>css把超出的部分显示为省略号的方法兼容火狐</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {
width: 300px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #D4D4D4;
background: #F1F1F1;
}
li { margin: 12px 0; }
li a {
display: block;
width: 80px;
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>
</head>
<body>
<ul>
<li><a href="#">suntear的技术空间</a></li>
<li><a href="#">suntear的技术空间</a></li>
<li><a href="#">suntear的技术空间</a></li>
<li><a href="#">suntear的技术空间</a></li>
<li><a href="#">suntear的技术空间</a></li>
<li><a href="#">suntear的技术空间</a></li>
<li><a href="#">suntear的技术空间</a></li>
</ul>
</body>
</html>

分享到：
| Windows下修改mysql编码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css把超出的部分显示为省略号的方法兼容火狐

    标题中的“css把超出的部分显示为省略号的方法兼容火狐”是指在CSS样式中，如何设置文本超出指定宽度时显示省略号，并确保这种方法在Firefox浏览器中也能够正常工作。这种技术通常用于限制长文本在有限的空间内展示...

    firefox下溢出部分省略号显示

    在Firefox浏览器中，开发者可以利用CSS属性来实现这一效果，使得当文本内容超出指定区域时，以省略号(...)的形式隐藏多余的部分。这一技术在网页设计中尤为实用，可以保持页面的整洁和易读性。 首先，我们需要了解...

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

    这段CSS代码将确保文本在固定宽度内显示，超出的部分会被隐藏，并在结尾处添加省略号。请注意，这种方法只适用于单行文本。如果你需要在多行文本中实现省略号效果，情况会稍微复杂一些。 对于多行文本的省略号，CSS...

    表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE，FF，safari

    本话题主要涉及以下几个关键知识点：表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性，特别是针对IE、Firefox（FF）和Safari这三大主流浏览器。 1. **表格题头拖动**：这是一种交互设计特性，...

    CSS超出文本指定宽度用省略号代替和文本不换行

    总结，通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`属性，我们可以有效地控制文本在指定宽度内的显示，避免文本换行并用省略号表示超出的部分。对于表格和多行文本，可能需要...

    CSS实现单行、多行文本溢出显示省略号的实现方法.docx

    单行溢出的实现主要是通过限制文本的换行，让其在固定宽度内显示，超出的部分用省略号替换。以下是一种常见的实现方式： ```css .whitespace-nowrap { white-space: nowrap; /* 阻止文本换行 */ overflow: hidden...

    DIV 上下居中 多行 省略号

    需要注意的是，`line-clamp`在某些浏览器（如Firefox）中不支持，所以如果需要跨浏览器兼容性，可能需要使用JavaScript或jQuery插件来实现类似效果。 在实际应用中，可能还需要考虑响应式设计，确保在不同设备和...

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

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

    css实现文本溢出显示省略号

    为了确保代码的跨浏览器兼容性，通常还会包括其他浏览器特定的前缀，例如`-moz-`为Firefox、`-webkit-`为Chrome、Safari等。但在这个示例中，我们只看到了`-o-`前缀，这可能是由于空间限制或者其他原因导致未展示...

    web前端超出两行用省略号表示的实现方法

    在Web前端开发中，有时我们需要对长文本...总的来说，实现Web前端文本超出两行显示省略号的方法是利用CSS的特定属性，而在实际开发中，开发者还需关注浏览器兼容性以及与后端技术的协同，以创建出高效、友好的Web应用。

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

    当元素内容超出其设定的宽度时，超出部分将被隐藏，并在文本末尾显示省略号。 然而，需要注意的是，不同浏览器对于CSS属性的支持度不尽相同。比如，在这篇文章中提到的“FF”，指的是Firefox浏览器，它对于`text-...

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

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

    多行省略号

    多行文本省略是指在有限的容器内，如果文本超出限定的高度，则在末尾添加省略号，以表示还有未显示的文本内容。这在新闻摘要、评论、产品介绍等场景中非常常见，能有效提升网页的视觉效果和用户体验。 **二、CSS3的...

    css兼容与差别　IE6,IE7,IE8,FireFox,Opera,Safari.doc

    3. **文本溢出隐藏(text-overflow)**：为了实现文本超出容器宽度时自动隐藏并显示省略号，可以使用CSS3的`text-overflow:ellipsis;`。但是，不同浏览器对这个属性的支持程度不同，需要添加各种私有属性如`-o-text-...

    兼容IE和FF的单行溢出文本显示省略号

    这种方法可以让过长的文本在单行内显示，并在超出部分以省略号代替，从而提高用户体验。 首先，我们需要一个包含待处理文本的`&lt;div&gt;`元素，并为其设置一个固定的宽度，例如`width: 200px;`。这样可以限制文本的显示...

    css多行文本溢出时出现省略号的示例

    - `text-overflow`: 规定超出盒子的文本如何显示，设置为`ellipsis`以显示省略号。 - `word-wrap`/`overflow-wrap`: 定义是否允许单词内部换行，`break-word`允许在单词内部换行。 - `white-space`: 控制空白字符的...

Magicbox
Global site tag (gtag.js) - Google Analytics