<!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>
分享到：
相关推荐
标题中的“css把超出的部分显示为省略号的方法兼容火狐”是指在CSS样式中，如何设置文本超出指定宽度时显示省略号，并确保这种方法在Firefox浏览器中也能够正常工作。这种技术通常用于限制长文本在有限的空间内展示...
在Firefox浏览器中，开发者可以利用CSS属性来实现这一效果，使得当文本内容超出指定区域时，以省略号(...)的形式隐藏多余的部分。这一技术在网页设计中尤为实用，可以保持页面的整洁和易读性。 首先，我们需要了解...
这段CSS代码将确保文本在固定宽度内显示，超出的部分会被隐藏，并在结尾处添加省略号。请注意，这种方法只适用于单行文本。如果你需要在多行文本中实现省略号效果，情况会稍微复杂一些。 对于多行文本的省略号，CSS...
本话题主要涉及以下几个关键知识点：表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性，特别是针对IE、Firefox（FF）和Safari这三大主流浏览器。 1. **表格题头拖动**：这是一种交互设计特性，...
总结，通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`属性，我们可以有效地控制文本在指定宽度内的显示，避免文本换行并用省略号表示超出的部分。对于表格和多行文本，可能需要...
单行溢出的实现主要是通过限制文本的换行，让其在固定宽度内显示，超出的部分用省略号替换。以下是一种常见的实现方式： ```css .whitespace-nowrap { white-space: nowrap; /* 阻止文本换行 */ overflow: hidden...
需要注意的是，`line-clamp`在某些浏览器（如Firefox）中不支持，所以如果需要跨浏览器兼容性，可能需要使用JavaScript或jQuery插件来实现类似效果。 在实际应用中，可能还需要考虑响应式设计，确保在不同设备和...
【知识点详解】 ...总结，通过CSS我们可以实现单行文本超出指定宽度后自动截断并显示省略号的效果，但在不同浏览器中可能需要不同的解决方案。了解这些技巧有助于我们创建更加兼容和美观的网页布局。
为了确保代码的跨浏览器兼容性，通常还会包括其他浏览器特定的前缀，例如`-moz-`为Firefox、`-webkit-`为Chrome、Safari等。但在这个示例中，我们只看到了`-o-`前缀，这可能是由于空间限制或者其他原因导致未展示...
在Web前端开发中，有时我们需要对长文本...总的来说，实现Web前端文本超出两行显示省略号的方法是利用CSS的特定属性，而在实际开发中，开发者还需关注浏览器兼容性以及与后端技术的协同，以创建出高效、友好的Web应用。
当元素内容超出其设定的宽度时，超出部分将被隐藏，并在文本末尾显示省略号。 然而，需要注意的是，不同浏览器对于CSS属性的支持度不尽相同。比如，在这篇文章中提到的“FF”，指的是Firefox浏览器，它对于`text-...
本文介绍了一种使用JavaScript来实现超出容器后显示省略号效果的方法，这种方法能够兼容处理一行或多行文本的情况。在介绍该方法之前，首先需要了解几个关键概念： 1. CSS中的文本溢出处理： - `text-overflow: ...
多行文本省略是指在有限的容器内，如果文本超出限定的高度，则在末尾添加省略号，以表示还有未显示的文本内容。这在新闻摘要、评论、产品介绍等场景中非常常见，能有效提升网页的视觉效果和用户体验。 **二、CSS3的...
3. **文本溢出隐藏(text-overflow)**：为了实现文本超出容器宽度时自动隐藏并显示省略号，可以使用CSS3的`text-overflow:ellipsis;`。但是，不同浏览器对这个属性的支持程度不同，需要添加各种私有属性如`-o-text-...
这种方法可以让过长的文本在单行内显示，并在超出部分以省略号代替，从而提高用户体验。 首先，我们需要一个包含待处理文本的`<div>`元素，并为其设置一个固定的宽度，例如`width: 200px;`。这样可以限制文本的显示...
- `text-overflow`: 规定超出盒子的文本如何显示，设置为`ellipsis`以显示省略号。 - `word-wrap`/`overflow-wrap`: 定义是否允许单词内部换行，`break-word`允许在单词内部换行。 - `white-space`: 控制空白字符的...