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

          目录
          相关文章
          |
          10天前
          |
          前端开发
          css的渐变属性linear-gradient
          css的渐变属性linear-gradient
          |
          1天前
          |
          前端开发
          前端基础(五)_CSS文本文字属性、背景颜色属性
          本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
          8 3
          前端基础(五)_CSS文本文字属性、背景颜色属性
          |
          3天前
          |
          前端开发
          Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
          本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
          10 0
          |
          1月前
          |
          前端开发 算法 开发者
          CSS 的了解text-rendering属性
          【8月更文挑战第24天】
          |
          1月前
          |
          前端开发 搜索推荐 UED
          浅谈css的cusor属性
          浅谈css的cusor属性
          32 1
          |
          1月前
          |
          前端开发
          CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
          CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
          |
          1月前
          |
          前端开发 UED 开发者
          神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
          【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
          43 0
          |
          1月前
          |
          前端开发 UED 开发者
          使用 CSS 的 line-height 属性来提高可读性
          使用 CSS 的 line-height 属性来提高可读性
          20 0
          |
          1月前
          |
          前端开发
          了解 css中 backface-visibility 属性
          了解 css中 backface-visibility 属性
          34 0
          |
          1月前
          |
          前端开发
          CSS常用滤镜属性讲解
          CSS常用滤镜属性讲解
          30 0