文本溢出处理

网页设计时经常发生文本内容超出容器范围的问题,在内容较多时多采用分页效果,在内容较少时则采用一些普通的文本溢出处理。常见的文本溢出处理方式有:

1.简单裁切

2.简单隐藏

3.隐藏并显示省略号

4.使用滚动条

  div.hide{
    overflow:hidden; /*简单隐藏*/
  }

  div.scroll{
    overflow:scroll; /*使用滚动条*/
  }

  div.clip{
    border:1px solid;
    overflow:hidden;/*超出部分隐藏*/
    white-space: nowrap;/*强制在一行显示*/
    text-overflow:clip;/*裁切*/
  }

  div.elli{/*超出部分省略号*/
    overflow:hidden;/*超出部分隐藏*/
    white-space: nowrap;/*强制在一行显示*/
    text-overflow:ellipsis;/*使用省略号*/
  }

时间: 2024-10-24 21:44:17

文本溢出处理的相关文章

文本溢出

1.介绍说明 移动端由于屏幕较小,能容纳的内容有限,所以对于文字可能常常需要用到文本省略,在具体介绍实现方法前,先了解一下相关属性: word-break:break-all;//只对英文起作用,以字母作为换行依据 word-wrap:break-word;//只对英文起作用,以单词作为换行依据 white-space:pre-wrap;//对中英文作用,强制换行: 2.单行文本溢出 .single_e{ overflow:hidden; text-overflow:ellipsis; whit

CSS实现多行文本溢出省略效果和单行文本溢出省略效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <styl

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

html文本溢出

关于溢出: 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidden:内容会被修剪,并且其余内容是不可见的: scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容; auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容; inherit:规定应该从父元素继承overflow属性的值. 2.空余空间 white-spac

08.05 边框图片 盒子倒影 新增属性 文本阴影 文本属性 文本换行 文本溢出 文本修饰 文字描边 其他属性

---恢复内容开始--- ### 边框图片 * border-image-source   图片地址 * border-image-slice     图片截取方式 值 浮点数/百分比 * border-iamge-width   边框图片厚度  值 长度单位 * border-image-outset   外延   值 长度单位 * borde-image-repeat    延伸方式  值 stretch/repeat/round/space * border-image border-im

CSS---解决文本溢出,换行

当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word-break 属性规定自动换行的处理方法. word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空格或连字符处换行. 2,overflow 属性规定当内容溢

文本溢出用省略号代替

<p class="title">A20 Banana Pi Development Board Module - Deep Blue</p> /*单行文本*/.title{width: 150px;height: 25px;line-height: 25px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*规定当文本溢出包含元素时发生的事情,clip :不显示省略标记(...),而是

新人跳坑系列《二十》文本溢出

分享者:toBeMN 文本溢出是一个非常常见的问题,尤其是在手机端上<ignore_js_op> 这是理想中的状态,但是对于长标题来说,可能就要崩溃了 轻者换行<ignore_js_op> 重者样式崩坏<ignore_js_op> 当一行文字超过了限定范围,就会出现换行等现象,这就叫文本溢出该如何解决文本溢出呢,其实只要短短一块css代码即可<ignore_js_op> 现在界面好看了吧(至少从我的审美出发还可以)<ignore_js_op> 超

文本溢出用省略号显示

文本溢出,分为单行文本溢出以及多行文本溢出, 单行文本溢出css代码如下: 1 p{ 2 overflow: hidden;//超出部分隐藏: 3 white-space: nowrap;//强制不换行: 4 text-overflow:ellipsis;//超出部分用省略号显示: 5 } 多行文本溢出css代码如下: 1 div{ 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; 5 -webkit-l

HTML元素文本溢出显示省略号(...)

一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容. inherit 规定应该从父元素继承 ove