美文网首页
用代码模拟三角形

用代码模拟三角形

作者: 让思念入土 | 来源:发表于2019-01-11 23:07 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出的文字省略号显示</title>
    <style>
        div {
            width: 150px;
            height: 25px;
            border: 1px solid pink;
            /*当文字显示不开的时候,自动换行*/
            /*white-space: normal;*/
            /*1. 要文字强制一行内显示 除非 遇到 br   */
            white-space: nowrap;
            /*2. 溢出隐藏*/
            overflow: hidden;
            /*3. 文字溢出 用省略号替代  ellipsis 省略号*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>hi~ 来自猩猩的你-欢迎你</div>
</body>
</html>
```![Image 20.png](https://img.haomeiwen.com/i15771793/32302bc1d805ef11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

模拟京东三角
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
        }
        p {
            position: absolute;
            top: -40px;
            left: 50%;
            margin-left: -20px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-color: transparent transparent pink transparent;
            font-size: 0;
            line-height: 0;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>
Image 21.png

相关文章

网友评论

      本文标题:用代码模拟三角形

      本文链接:https://www.haomeiwen.com/subject/arafdqtx.html