html文本溢出

关于溢出:

1、溢出属性(容器的)

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值,内容不会被修剪,会成现在元素框之外;

hidden:内容会被修剪,并且其余内容是不可见的;

scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;

auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;

inherit:规定应该从父元素继承overflow属性的值。

2、空余空间

white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit

该属性用来设置如何处理元素内的空白;

normal:默认值,空白会被浏览器忽略,

pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;

nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止;

pre-wrap:保留空白符序列,但是正常的进行换行;

pre-line:合并空白符序列,但是保留换行符;

inherit:规定应该从父元素继承White-space属性的值;(ie浏览器不支持此属性值)

3、文本溢出:text-overflow:clip/ellipsis

取值:

clip:不显示省略号(...),而是简单的裁切;

ellipsis:当对象内文本溢出时,显示省略标记;

说明:

text-overflow属性仅是...,当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:

1、容器宽度:width:value;

2、强制文本在一行内显示:white-space:nowrap;

3、溢出内容为隐藏:overflow:hidden;

4、溢出文本显示省略号:text-overflow:ellipsis;

&gt;      >

&lt;      <

时间: 2025-01-13 19:21:11

html文本溢出的相关文章

文本溢出

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

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