CSS高级用法——三角图形，鼠标样式，解决图片底端空白缝隙的问题，溢出文字省略号表示

@无名过客

已于 2024-08-21 12:02:28 修改

阅读量633

点赞数 14

文章标签： css 前端

于 2024-08-21 11:59:03 首次发布

本文链接：https://blog.csdn.net/2301_80121278/article/details/141388418

版权

一.如何利用CSS来画出三角形（不适用图片和字体图标）

一.如何利用CSS来画出三角形（不适用图片和字体图标）

就像这样，显示在某个盒子上面

.box1 {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: black;
  /* 照顾兼容性 */
  line-height: 0;
  font-size: 0;
}

将盒子高宽设置为0，三角形大小只与边框大小border有关，这样即可完成，然后使用绝对定位压住大盒子就完成了。

二.鼠标样式cursor

常用的五类：

三.vertical-align

3.1:将图片，表单，文字元素对齐

--------------------------------------------------------------------------------------------------------------------------------

img {
  vertical-align: middle;
}
li {
  disaplay: inline-block;
  vertical-align: middle;
}

3.2解决图片底部默认空白缝隙的问题

解决办法：

给图片添加 vertical—align: middle topl bottom; 等。（提倡使用的）
把图片转换为块级元素 display: block；

都可以解决这个问题

四.溢出文字省略号表示

4.1单行溢出文字省略号表示

这里简单分为三步走：

1. 先强制一行内显示文本 white-space: nowrap; 默认normal 自动换行

2· 超出的部分隐藏 overflow: hidden;

3. 文字用省略号替代超出的部分 text-overflow: ellipsis;

4.2 多行溢出文字省略号表示

使用一下代码调整即可：

            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制一个块元素显示行文本数目 */
            -webkit-line-clamp: 4;
            /* 让伸缩盒的对象子元素居中显示 */
            -webkit-box-orient: vertical;

--------------------------------------------------------------------------------------------------------------------------------

源码：

<!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: 150px;
            height: 85px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制一个块元素显示行文本数目 */
            -webkit-line-clamp: 4;
            /* 让伸缩盒的对象子元素居中显示 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div class="div">
        富排名
        •福布斯中国富豪榜 •福布斯全球亿万富豪榜 •胡润百富榜 •胡
        润IT富豪榜 •胡润全球富豪榜 •新财富500富人榜

    </div>
</body>

</html>

别忘记在调整过程要注意盒子大小

———————————————————————————————————————————

本文到这里就结束了，你的【点赞，好评，收藏】是我创作的动力。感谢大家支持。