CSS记录博客

最新推荐文章于 2024-10-09 11:42:00 发布

一只像咸鱼的小鲸鱼.

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量128

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/WhaleFallljf/article/details/109428181

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录博客

1、文字超出两行用省略号显示

文字超出两行用省略号显示

使用示例

.my_two_span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    color: #999999;
}

因为之前都是超出某个宽度之后就通过text-overflow: ellipsis;这个属性就可以把超出的内容通过省略号显示
但是这次不同的就是内容总不可能都是一行，所以给它指定行数超出的显示省略号所以写法会有那么一点不同

这个东西就相当于我把一个div设置成display:table之后下面的元素如果加上table-cell无论有一个还是多个元素都会被解析成td，就会变成一行来进行显示

display:table和display:table-cell实现单行，多行文本垂直居中

2、深入理解css中vertical-align属性

用法的话都是需要在一些特定的属性设置之下在一些垂直向上的元素中使用才会有效果，效果也是根据一些
规则来使用的，emmm，以后说不定就会遇见并且用上呢

第一次在实际使用中遇见我就懵了，使用的是一个伪类来实现文字的垂直居中，原理就是基线对齐，当两个元素都设置了
vertical-align:middle之后会都根据居中的基线来对齐，就比如如果你要让你的这个文字对齐的话你就
可以设置一个占满这一格的高度的一个空的div设置这个属性，这样就会根据满屏的这个高度的基线去对齐两个div就实现
了文字的垂直居中了

深入理解css中vertical-align属性

利用vertical-align:middle垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>vertical-align 垂直居中</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <style type="text/css">
        .wrapper{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            text-align: center;
            margin: 0 auto;
            display: inline-block;
            vertical-align: baseline;
        }

        .wrapper::after{
            content: '';
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        /* .help{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        } */
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box"></div>
        <!-- <div class="help"></div> -->
    </div>
</body>
<script type="text/javascript">
   
</script>

</html>