Day4:文本溢出

学习目标

一、容器溢出相关的属性

1、页面重构

2、文本溢出相关的属性

  • 1、溢出属性(容器的)

    说明:

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

    visible:默认值,溢出内容会显示在元素之外;

    hidden:溢出内容隐藏;

    scroll:滚动,溢出内容以滚动方式显示;

    auto:如果有溢出会添加滚动条,没有溢出正常显示;

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

    overflow-x:X轴溢出;     overflow-y:Y轴溢出

  • 2、空余空间

    说明:

    white-space:normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白;

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

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

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

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

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

    inherit:规定应该遵从父元素继承White-space属性的值;

  • 3、省略号显示

    说明:

    text-overflow:clip/ellipsis ;

    clip:不显示省略号(...);

    ellipsis:显示省略标记;

     

    说明:

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

    1、容器宽度:width:value;

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

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

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

     

    扩展知识点:实现多行文本溢出时产生省略号
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; overflow: hidden;
    1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2、display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    适用范围:
    因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;但文字未超出行的情况下也会出现省略号,可结合js优化该方法

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值