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

CSS3控制文字只显示一行超出部分显示省略号

 
阅读更多
在编写网页的时候,我们希望文字不换行,特别是在新闻列表的时候,文字多了就添加省略号,不用程序去判断字符,英文和汉字的字符数量是不对应的,一个汉字占两个英文字符的位置,如果一行出现了英文字符,裁切就不准确了,不过用css可以办到控制文字只显示一行,超出部分显示省略号,如果需要强制换行,看最后

首先来看一个例子:
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧!
 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧!
</p>

测试浏览器: IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.11

1、text-overflow: ellipsis;

这里的重点样式是 text-overflow: ellipsis;

不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

我在网上看到有很多人说opera不支持text-overflow,可能因为我用的是最新版本的,已经支持这个属性了,所以没办法测试,不过网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;至于火狐,也有很多人说不支持,版本问题无法考证,大家有试过的可以出来指证一下。

2、white-space

顺便解释一下white-space的用法

white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 或<br>无论white-space设置什么都会有空格或回车。)

下面是wschool上white-space可能的值:

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
  • pre-wrap 保留空白符序列,但是正常地进行换行。
  • pre-line 合并空白符序列,但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。


css让pre标签强制自动换行

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到pre标签输出代码或是代码高亮,而默认情况下,pre 标签中的内容若超出范围不会自动换行。

下面介绍一个方法让 <pre > 标签中的内容自动换行并符合 W3C 标准(多浏览器支持)
pre{
  white-space:pre-wrap  /*css3.0*/
  white-space:-moz-pre-wrap  /*Firefox*/
  white-space:-pre-wrap  /*Opera4-6*/
  white-space:-o-pre-wrap  /*Opera7*/
  word-wrap:break-word  /*InternetExplorer5.5+*/
}
分享到:
评论

相关推荐

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

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

    CSS文本超出2行就隐藏并且显示省略号

    //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...

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

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

    CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

    在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中,包含了一个名为“2.css”的样式表文件,它使用了`-webkit-line-clamp`属性来指定省略的行数,以及一个“1.html.txt”的HTML文件,用于展示这个效果。...

    DIV 上下居中 多行 省略号

    总结来说,实现`&lt;div&gt;`内多行文字垂直居中并添加省略号功能,主要涉及CSS的布局、文本对齐和溢出隐藏技术。通过`display: flex`或`display: grid`实现上下居中,结合`line-clamp`、`-webkit-line-clamp`以及`...

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

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

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

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

    网页中字段太长,省略号表示。css显示

    在网页设计中,有时我们需要处理过长的文本字段,使其在有限的空间内显示部分内容并以省略号(...)结尾,以保持页面整洁且易于阅读。这种效果可以通过CSS(层叠样式表)来轻松实现。本文将深入探讨如何使用CSS实现...

    超出的文字用省略,用…代替.rar

    当一个字符串长度超过预设的最大显示长度时,我们希望在超出部分添加省略号("…")以表示还有未显示的内容。在HTML中,我们可以使用CSS的`text-overflow`属性配合`white-space`和`overflow`属性来实现这个效果。但...

    css 超出用省略号当标题字符溢出用省略号表示

    CSS中处理标题文本溢出用省略号表示的方法是一项常见的网页设计技巧,主要应用于当列表项、标题等文本内容超出其容器宽度时,为了保持界面的整洁性,将超出部分用省略号(...)来代替。以下是从标题、描述以及部分...

    CSS实现标题文字过长部分显示省略号的方法

    在Web开发中,为了提升用户的阅读体验,常常需要对长文本进行截断处理,特别是在标题或列表项中,当内容超出预设空间时,显示省略号(...)是一种常见的做法。以下将详细介绍如何使用CSS实现单行和多行文本溢出时...

    微信小程序实现多行文字超出部分省略号显示功能

    `的组合使得当内容超出设定的行数时,超出的部分会被隐藏,并在最后一行末尾显示省略号。 然后,在微信小程序的WXML文件中,我们将这个样式应用到文本元素上: ```html &lt;text class='productNameText'&gt;{{item....

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    在本文中,我们将探讨如何使用JavaScript和CSS技术实现当网页中的文本内容超出设定的长度时,自动用省略号(...)来代替超出部分,并且当用户将鼠标悬停在该文本上时,显示完整的文本信息。这通常是在网页设计中用来...

    判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号

    总之,实现“判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号”的功能,需要结合CSS的溢出省略策略与JavaScript的动态交互处理。通过这样的方式,我们可以为用户提供更好的阅读体验,同时保持界面...

    CSS控制文本的长度 超过一行显示省略号的实现方法

    2. `height`: 用来设置元素的高度,虽然在实现单行文本省略号时高度通常不那么关键,但在这里我们设定为20px以确保文本只在一行内显示。 3. `text-overflow: ellipsis;`: 这个属性告诉浏览器当内容溢出元素边界时,...

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

    为了使文字在一行内显示并触发`text-overflow`效果,我们需要设置`white-space: nowrap;`,这样文本就不会自动换行,而是尽可能在一行内显示所有内容。 在HTML结构上,通常我们会将需要应用省略号效果的文本放在一...

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

    这样,即使在不支持`-webkit-line-clamp`的浏览器中,也可以看到省略号,但可能无法精确控制显示的行数。 总结来说,CSS实现单行或多行文本溢出显示省略号的方法主要包括使用`white-space: nowrap`, `overflow: ...

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

    最后,通过设置text-overflow: ellipsis,超出隐藏部分则会显示为省略号。 在某些情况下,可能还需要用到HTML中的标签。这个标签能够强制内容不换行,即使文本很长,也会在一行内显示,配合CSS的text-overflow属性...

Global site tag (gtag.js) - Google Analytics