`

CSS3 text-overflow 文本溢出

    博客分类:
  • CSS3
 
阅读更多
text-overflow 属性规定当文本溢出包含元素时发生的事情。
语法:text-overflow: clip|ellipsis|string;
clip         修剪文本。
ellipsis     显示省略符号来代表被修剪的文本。

注意:text-overflow:ellipsis;要与white-space:nowrap; 和overflow:hidden; 一起使用才有效果。因为text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果

<div class="test" >This is some long text that will not fit in the box</div>


div.test{
white-space:nowrap;
overflow:hidden;  
text-overflow:clip;
width:12em; 
border:1px solid #000000;
}

效果:
div.test{
white-space:nowrap;
overflow:hidden;  
text-overflow:ellipsis;
width:12em; 
border:1px solid #000000;
}

效果:
  • 大小: 636 Bytes
  • 大小: 594 Bytes
分享到:
评论

相关推荐

    FF下文本溢出的text-overflow完美解决方方案

    `text-overflow`属性是CSS中用于处理文本溢出的一种解决方案,它允许我们控制超出元素边界时的文本显示方式。本文将详细介绍在Firefox下如何完美解决文本溢出的问题,并提供相关的解决方案。 首先,我们需要理解`...

    大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:

    大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:

    CSS--文本溢出完美样式

    "CSS--文本溢出完美样式"这一主题聚焦于解决一个常见的问题:当文本内容过多,超出其容器的边界时,如何优雅地处理这种情况。以下是对这个知识点的详细讲解: 1. **文本溢出的基本概念**:在HTML元素中,如果文本...

    CSS属性text-overflow的使用问题

    在CSS中,`text-overflow`属性用于处理文本溢出的情况,它允许你定义当文本在有限的容器内无法完全显示时如何展示超出部分。在标题和描述中提到的,`text-overflow`通常需要与`overflow`和`white-space`属性结合使用...

    无js实现text-overflow: ellipsis; 完美支持Firefox

    在前端开发中,文本溢出处理是一个常见的需求,特别是当我们在设计网页时,希望限制某段文字的显示长度,超出部分用省略号(...)表示。`text-overflow: ellipsis;` 是 CSS3 提供的一个样式属性,用于处理溢出的文本...

    使用text-overflow:ellipsis实现溢出文本省略号显示无需js

    听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...

    CSS省略号text-overflow超出溢出显示省略号

    标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时,用省略号表示被截断的文本。 `text-overflow`属性有以下几...

    css中text-overflow属性与文本截断详解

    在CSS中,`text-overflow`属性是用来处理文本溢出情况的一个重要工具,尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用,来实现文本的截断和省略。本文将深入探讨`...

    使用text-overflow:ellipsis实现文字超出用省略号显示

    当文本溢出其包含元素的边界时,`text-overflow` 属性定义了应如何显示省略标记(通常是三个点 "...")。要使此属性生效,需要配合其他两个属性一起使用:`overflow` 和 `white-space`。其中,`overflow: hidden` ...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    溢出文本text-overflow的使用问题分析及解决

    text-overflow属性就是用来解决这个问题的CSS属性。它有两个属性值:clip和ellipsis。 首先,我们来详细了解一下这两个属性值的含义和区别: 1. clip:这个值表示“裁剪”。当文本溢出时,超出部分将被简单地裁剪...

    标题长度溢出时,自动显示为省略“...”的Css text-overflow

    CSS中text-overflow属性用于处理文本溢出元素框边界时的显示情况。当文本长度超过了元素所能容纳的范围,我们可以决定如何显示溢出的部分。一般情况下,浏览器默认的处理方式是将文本截断,也就是直接切断超出部分,...

    HTML超出文本显示省略号...通过text-overflow实现

    `text-overflow`是一个非常实用的样式规则,它可以控制当元素内的文本溢出其边界时如何处理。在标题和描述中提到的,这个功能在展示新闻列表等场景中特别常见,因为它能够有效地节省空间并引导用户点击以查看完整...

    移动端的text-overflow多行文本溢出显示省略号(…)

    在移动端,`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号,但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先,对于基于WebKit的浏览器(如...

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

    总结来说,CSS实现单行或多行文本溢出显示省略号的方法主要包括使用`white-space: nowrap`, `overflow: hidden`, 和 `text-overflow: ellipsis`组合,以及利用Webkit的`-webkit-line-clamp`属性和CSS渐变背景技术。...

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

    总结来说,CSS提供了多种方式来处理文本溢出问题,你可以根据具体需求选择合适的方法。`overflow`和`text-overflow`组合适合单行文本的截断,`white-space: nowrap`适用于保持文本在同一行,而`-webkit-line-clamp`...

    表格里使用text-overflow后不能隐藏超出的文本的解决方法

    在CSS3中,`text-overflow`属性是一个非常实用的工具,用于处理文本溢出的情况。它提供了两种主要的值:`ellipsis`和`clip`。当你设置`text-overflow: ellipsis`时,文本超出容器边界的部分会被替换为省略号,表示...

Global site tag (gtag.js) - Google Analytics