每日一学—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

          目录
          相关文章
          |
          3月前
          |
          前端开发
          CSS属性:盒子模型
          CSS属性:盒子模型
          34 0
          |
          3月前
          |
          前端开发
          CSS属性
          CSS属性
          32 0
          |
          1月前
          |
          Web App开发 前端开发 iOS开发
          css所有缩写属性,CSS属性简写整理
          css所有缩写属性,CSS属性简写整理
          24 1
          |
          3月前
          |
          前端开发
          前端基础(五)_CSS文本文字属性、背景颜色属性
          本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
          44 3
          前端基础(五)_CSS文本文字属性、背景颜色属性
          |
          2月前
          |
          前端开发
          CSS 中哪些属性可以继承
          在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
          |
          1月前
          |
          前端开发
          css简写属性
          css简写属性
          30 0
          |
          2月前
          |
          前端开发 JavaScript
          如何在CSS中添加自定义属性
          如何在CSS中添加自定义属性
          16 0
          |
          2月前
          |
          前端开发
          运用CSS伪类与属性,巧妙实现背景图片旋转效果
          运用CSS伪类与属性,巧妙实现背景图片旋转效果
          36 0
          |
          2月前
          |
          前端开发
          哪些 CSS 属性可以继承?
          哪些 CSS 属性可以继承?
          48 0
          |
          3月前
          |
          前端开发
          Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
          本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
          57 0