每日一学—CSS overflow与text-overflow与white-space属性

简介: CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。white-space属性指定元素内的空白怎样处理。

 overflow定义和用法

    • CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
    • overflow 属性规定当内容溢出元素框时发生的事情。

    image.png

    text-overflow 定义和用法

      • text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。
      • text-overflow 属性规定当文本溢出包含元素时发生的事情。

      text-overflow 需要配合以下两个属性使用:

        • white-space: nowrap;
        • overflow: hidden;

        image.png

        white-space定义和用法

          • white-space 属性设置如何处理元素内的空白。
          • 这个属性声明建立布局过程中如何处理元素中的空白符。


          image.png

          代码如下

          <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>div.test        {
          white-space:nowrap; 
          width: 24rem; 
          overflow:hidden; 
          border:1pxsolid#000000;
                  }
          </style></head><body><p>"text-overflow:ellipsis"效果:</p><divclass="test"style="text-overflow:ellipsis;">必须咬紧牙关、持续攻坚,快字当头、以快制快,时不我待持续奋战攻难点、破堵点,事不过夜抢时间、抢进度,用最短的时间遏制疫情扩散,以强有力的措施确保居民生活物资供应,保质保量、送到家门。</div><p>"text-overflow:clip"效果:</p><divclass="test"style="text-overflow:clip;">必须咬紧牙关、持续攻坚,快字当头、以快制快,时不我待持续奋战攻难点、破堵点,事不过夜抢时间、抢进度,用最短的时间遏制疫情扩散,以强有力的措施确保居民生活物资供应,保质保量、送到家门。</div></body></html>

          效果图

          image.png

          目录
          相关文章
          |
          4月前
          |
          前端开发
          CSS属性:盒子模型
          CSS属性:盒子模型
          42 0
          |
          4月前
          |
          前端开发
          CSS属性
          CSS属性
          46 0
          |
          2月前
          |
          前端开发
          CSS 浮动属性讲解和使用
          本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
          43 2
          |
          2月前
          |
          前端开发
          CSS transition过渡属性详解
          本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
          81 1
          |
          2月前
          |
          Web App开发 前端开发 iOS开发
          css所有缩写属性,CSS属性简写整理
          css所有缩写属性,CSS属性简写整理
          43 1
          |
          3月前
          |
          前端开发
          CSS 中哪些属性可以继承
          在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
          |
          2月前
          |
          前端开发
          css简写属性
          css简写属性
          39 0
          |
          3月前
          |
          前端开发 JavaScript
          如何在CSS中添加自定义属性
          如何在CSS中添加自定义属性
          29 0
          |
          3月前
          |
          前端开发
          运用CSS伪类与属性,巧妙实现背景图片旋转效果
          运用CSS伪类与属性,巧妙实现背景图片旋转效果
          57 0
          |
          3月前
          |
          前端开发
          哪些 CSS 属性可以继承?
          哪些 CSS 属性可以继承?
          73 0