`

div显示固定长度的内容(text-overflow)

    博客分类:
  • html
web 
阅读更多
web开发过程中,有时候从数据库查出来的数据过长,前台页面如果没有控制好,会显示很长的数据,影响美观,而用后台去控制长度有些麻烦。这个时候就需要只显示固定的长度,将多余的内容以“......”或者直接截取不显示,可以使用 
                 text-overflow:clip 或者text-overflow: ellipsis
                 clip:不显示省略标记(...),而是简单的裁切
                 ellipsis:当对象向内文本溢出时显示省略标记(...)

代码如下:

<div  style="width:30px;  text-overflow:ellipsis;     white-space:nowrap; overflow:hidden;">  
       abcdefghijklmnopqrstuvwxyz   
</div>  
注解: width:20px  限定需要显示的字符的长度,
           text-overflow:ellipsis :当前元素内长文本溢出时显示省略号(注意,此属性需和下面两个属性同时使用)
           white-space:nowrap:强制文本在一行内显示
           overflow:hidden:将溢出文本隐藏(否则会在一行内强制显示并超出容器宽度)。
分享到:
评论

相关推荐

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

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

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

    text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    总结,要让表格单元格内容不换行,单元格不被撑开,并在显示不下的时候在结尾处显示“...”,你需要通过CSS设置`white-space`、`overflow`和`text-overflow`属性,并为单元格设定一个固定的宽度。同时,确保所有可能...

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

    `text-overflow`属性的`ellipsis`值会在文本溢出时显示省略号。需要注意的是,`text-overflow`单独使用无效,必须与`white-space: nowrap;`和`overflow: hidden;`一起使用,前者强制文本在同一行显示,后者隐藏超出...

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

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

    CSS控制html文本溢出

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

    课题_CSS隐藏多余文字的几个方法 (2).docx

    `text-overflow`属性对SEO友好,因为它不会改变原始内容,只是视觉上进行了截断。 总的来说,CSS隐藏多余文字的方法多种多样,开发者应根据具体需求选择合适的技术。`text-indent`、调整`line-height`和`font-size`...

    JSP中的点点样式

    例如,使用jQuery的`.text()`方法获取文本内容,截取需要的长度,再设置回元素中。 6. **响应式设计** 在响应式布局中,点点样式需要根据不同的设备视口大小进行适配。可以使用媒体查询(`@media`)来调整截断点的...

    文本溢出时显示省略标记

    首先,`text-overflow` 属性是关键,它用于控制当内联内容溢出元素框时会发生什么。当设置为 `ellipsis` 时,它会在溢出部分添加一个省略号,以表示内容被截断。但仅设置 `text-overflow` 是不够的,我们还需要配合...

    让超出DIV宽度范围的文字自动显示省略号...

    为了解决这个问题,可以使用CSS中的`text-overflow`属性来实现当文本超出容器宽度时自动显示省略号(`...`),从而达到良好的视觉效果。 #### CSS 属性详解 ##### text-overflow: ellipsis; `text-overflow`属性...

    div中文字内容溢出常见的解决方法

    由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:“hidde” ——-缺点是会经常遇到最后一行文字显示不全的情况,建议...

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

    总之,通过CSS的`overflow`, `text-overflow`, 和 `white-space`属性,我们可以有效地控制div内的文字超出时的显示方式,提高网页设计的美观性和用户体验。同时,对于多行文本的处理,还可以借助`-webkit-line-clamp...

    CSS实现限制字数功能当对象内文本溢出时显示省略标记

    总的来说,CSS 的 `text-overflow`、`white-space` 和 `overflow` 属性结合使用,能够优雅地限制文本长度,确保页面布局的整洁,同时提供了一个清晰的视觉提示,告知用户内容已被截断。对于开发者来说,这是一种高效...

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

    `white-space`用于控制空白符的处理,`overflow`决定超出内容的处理方式,`text-overflow`则定义如何显示超出的内容。 以下是一个基本的CSS样式示例: ```css #ellipsis-text { width: 200px; /* 设置一个固定的...

    div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...

    这段CSS代码定义了一个类名为`.text-overflow`,当一个元素应用了这个类时,其内部文本就会在一行内显示并且超出部分会以省略号显示,而不是换行显示。 对于表格,如果想实现类似的效果,需要对表格的宽度以及表格...

    DIV 超出字符数用省略号代替的CSS代码

    1. CSS中的`text-overflow`属性,它定义了如何向用户显示被截断的溢出内容,常用于创建溢出文本的视觉效果。 2. `overflow: hidden;`属性,用于控制内容溢出元素框时如何处理。 3. `white-space: nowrap;`属性,用来...

    div+css 兼容性总结

    - 要让`li`内容超过长度后显示省略号,可以使用以下CSS: ``` li { width: 200px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera support */ overflow: hidden; } ...

    强制文本在一行内显示,并且后面有省略号效果的实现方法

    总结一下,要实现文本在一行内显示并带有省略号效果,我们需要组合使用`text-overflow: ellipsis`、`white-space: nowrap`和`overflow: hidden`这三个CSS属性。这种方法能够优雅地处理长文本,使得用户界面更加美观...

Global site tag (gtag.js) - Google Analytics