css工作中常用属性

css常用属性

  1. display:flex
  2. flex属性
  3. ........
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 单行出现省略号 */
        .div{
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 多行文字溢出隐藏 */
        .div_two{
            width: 100px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            color: red;
            margin-top: 20px;
        }
        /* css写三角形 */
        .math{
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid blue;
            margin-top: 20px;
        }
        /* 出现周围炫光 */
        .div_three{
            box-shadow: 0 0 10px blue;
            margin-top: 20px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div"> 这是很长的文字这是很长的文字这是很长的文字这是很长的文字这是很长的文字这是很长的文字 </div>
    <div class="div_two">这是多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行</div>
    <div class="math"></div>
    <div class="div_three"></div>
</body>
</html>

效果图

非常方便的属性

相关推荐
炫饭第一名6 分钟前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴7 分钟前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua
奇舞精选8 分钟前
一文了解 Server-Sent Events (SSE):构建高效的服务器推送应用
前端
Yeats_Liao14 分钟前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang
纯爱掌门人20 分钟前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
丘耳24 分钟前
vis-network 知识点笔记
前端·javascript
有点笨的蛋25 分钟前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
小着26 分钟前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
潜心编码32 分钟前
基于Django的医疗电子仪器系统
前端·数据库·1024程序员节
摘星编程37 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb