`

text-overflow:ellipsis显示省略符号来代表被修剪的文本

阅读更多

text-overflow:ellipsis 显示省略符号来代表被修剪的文本

浏览器支持性:所有主流浏览器都支持(chrome、ie、firefox、safari、opera)

注意:下面这些css属性要一起使用(text-overflow适用块级元素)

    overflow: hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

显示省略号来代替被修剪的文本经常用在列表显示(Web移动端)。

text-overflow的另一个属性值clip会修剪文本。

 

添加hover事件显示全部内容,如下所示:

div.test:hover

{

text-overflow:inherit;

overflow:visible;

 

}

分享到:
评论

相关推荐

    前端大厂最新面试题-single_multi_line.docx

    * `text-overflow`:规定当文本溢出时,显示省略符号来代表被修剪的文本 * `white-space`:设置文字在一行显示,不能换行 * `overflow`:文字长度超出限定宽度,则隐藏超出的内容 例如: ```css p { overflow: ...

    CSS控制html文本溢出

    #### 一、引言 在网页设计中,经常会遇到内容超出容器宽度的情况。为了使页面布局更加整洁美观,合理地处理文本溢出显得尤为重要。...此外,还可以通过调整`font-size`和`width`等属性来进一步优化文本显示效果。

    从零学CSS系列之文本属性

    `text-overflow`属性用于处理溢出容器的文本内容,它可以和`overflow`属性以及`white-space`属性一起使用,以显示省略符号来代表被修剪的文本。在配合`overflow:hidden;`使用时,`text-overflow: ellipsis;`能让文本...

    如果文字过长,则将过长的部分变成省略号显示

    设置为 `ellipsis` 表示在文本的末尾添加省略号来表示内容被修剪。 ```css text-overflow: ellipsis; ``` 结合这两个属性,我们可以创建一个具有固定宽度和高度的容器,并将过长的文本内容显示为省略号。在提供...

    CSS 超出隐藏实现限制字数的功能代码(多浏览器)

    3. `text-overflow` 属性:这个属性指示当内容被修剪时,如何显示省略标记(…)或其他替换内容。设置为`ellipsis`可以在文本被隐藏时显示省略号。 ```css text-overflow: ellipsis; ``` 然而,需要注意的是,...

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

    有效值包括 `clip`(修剪文本),`ellipsis`(显示省略号来代表被修剪的文本),和 `string`(使用给定的字符串来代表被修剪的文本)等。 - `overflow`: 此属性指定了如果内容溢出其区域,是否裁剪内容(`hidden`)...

    第十四课 css其他样式-011

    例如,通过设置`overflow: hidden`、`text-overflow: ellipsis`和`white-space: nowrap`,可以实现标题在固定宽度内以省略号显示超出部分。 前端开发是一个不断学习和实践的过程,持续进步是关键。如果你在学习过程...

    css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)

    这个属性的用途在于限制一个块级元素内的文本显示行数,超出部分则通过省略号隐藏,从而达到所谓的“文本溢出隐藏”的效果。然而,需要注意的是,尽管-webkit-line-clamp广泛应用于实际开发中,但它并非W3C官方标准...

    用css截取字符实现文字自动截断隐藏溢出文本

    - `ellipsis`:当对象内的文本溢出时,显示省略标记来代表被修剪的文本。 - **overflow**:这个属性指定了当内容溢出其元素框时如何管理内容。这里通常使用`hidden`值,隐藏超出容器的部分。 - **white-space**:...

    div 超出隐藏 文字超出div部分隐藏css代码

    常见的值有`clip`(默认值,修剪文本)和`ellipsis`(显示省略号)。为了显示省略号,我们需要配合`white-space`属性来确保文本在同一行内: ```css text-overflow: ellipsis; white-space: nowrap; ``` `white-...

    微信小程序实现指定显示行数多余文字去掉用省略号代替

    ` 属性决定当文本溢出包含元素时发生的事情,这里使用ellipsis表示用省略号来代表被修剪的文本。 实际使用时,可以在`.goods-details-content`类中设置`-webkit-line-clamp: 4;`,这意味着文本将被限制在4行内显示...

    html文本溢出显示省略字符的两种常用解决方法

    `-webkit-line-clamp`属性用于限制在一个块元素显示的文本的行数,当文本超出这个行数时,就会显示省略号来代表被修剪的文本。在这里的例子中,`-webkit-line-clamp:2;`表示最多显示两行文本。 `white-space:pre-...

    文字溢出滚动展示

    2. `text-overflow`:当修剪了white-space并且`overflow`不是`visible`时,这个属性决定如何显示溢出的文本。常设置为`ellipsis`来显示省略号,表示内容被截断。 3. `white-space`:这个属性用于控制元素内的空白...

    ntt123456:微信小程序中css实用简单技巧

    1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent ...ellipsis : 用省略号来

    CSS文本超出div或者span时用省略号代替

    当`overflow`设置为`hidden`并且文本被修剪时,`text-overflow`可以设置为`ellipsis;`,这样浏览器会在文本结尾处添加省略号。 `white-space`属性用于控制元素内的空白字符处理方式。为了防止文本在容器内换行,...

    css+js结合实现文本内容自适应页面大小截取显示

    2. **Text-Overflow属性**:与`overflow`配合使用的`text-overflow`属性允许指定如何处理被修剪的文本。设置为`ellipsis`会在文本末尾添加省略号,表示内容被截断。 3. **白名单换行**:使用`white-space`属性,如`...

    CSS3自定义滚动条样式的示例代码

    包括clip(修剪文本)、ellipsis(显示省略符号来代表被修剪的文本)和string(使用给定的字符串来代表被修剪的文本)。 然而,自定义滚动条的真正魅力在于其伪元素的使用。对于webkit内核的浏览器(如Chrome、...

    懒人原生纯CSS多(单)行文本溢出用...代替效果.zip

    它可以设置为 `ellipsis` 来添加一个或多个省略号,表示内容被修剪。 3. `white-space` 属性:用于控制元素内的空白字符处理。为了确保文本在特定宽度内换行,可以设置为 `nowrap`,阻止文本自动换行。 4. `...

Global site tag (gtag.js) - Google Analytics