zoukankan      html  css  js  c++  java
  • css:vertical-align&文字溢出(vertical-align属性、溢出的文字显示为省略号)

    1、vertical-align属性

    (1)使用场景

    经常用于设置图片或者表单和文字的垂直对齐,用于设置一个元素的垂直对齐方式,但是他只针对于行内元素或行内块元素

     (2)属性值

    • baseline:默认值,元素放置在父元素的基线上
    • top:把元素的顶端与行中最高元素的顶端对齐
    • middle:把此元素放置在父元素的中部
    • bottom:把元素的㡳端与行中最低的元素的㡳端对齐

    (3)测试

    默认值:

        <img src="img/1.jpeg" />你好abcdefgh

     bottom:

    <img src="img/1.jpeg" style="vertical-align: bottom;" />你好abcdefgh

     middle:

    <img src="img/1.jpeg" style="vertical-align: middle;" />你好abcdefgh

     top:

    <img src="img/1.jpeg" style="vertical-align: top;" />你好abcdefgh

     (4)应用

    将图片放到div标签内部的时候,存在底部不能对齐的情况:原因是,文字默认是与图片进行基线对齐

     将文字与图片的对齐方式改为底端对齐:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <style>
            div{
                 400px;
                border: 2px solid red;        
            }
            img{
                vertical-align: bottom;
            }
        </style>
        <body>
            <div>
                <img src="img/1.jpeg"/>你好abcdefgh
            </div>
            
        </body>
    </html>

    2、溢出的文字显示为省略号

    (1)正常显示:

        div{
                 200px;
                height: 180px;    
                border: solid;
                color: red;
            }

     (2)强制一行内显示:

        div{
                 200px;
                height: 180px;    
                border: solid;
                color: red;
                white-space: nowrap;
            }

     (3)溢出部分的隐藏

        div{
                 200px;
                height: 180px;    
                border: solid;
                background-color: aquamarine;
                white-space: nowrap;//强制显示在一行
                overflow: hidden;//溢出部分隐藏
                text-overflow: ellipsis;//溢出显示省略号进行代替
            }

    (4)多行文字溢出显示省略号

            div{
                 150px;
                height: 180px;    
                border: solid;
                background-color: aquamarine;
                overflow: hidden;//溢出部分隐藏
                text-overflow: ellipsis;//溢出显示省略号进行代替
                display: -webkit-box;//弹性伸缩盒子模型
                -webkit-line-clamp: 2;//限制显示的行数
                -webkit-box-orient: vertical;//盒子的排列方式
                
            }

    存在兼容性问题。

  • 相关阅读:
    织梦DedeCms网站首页不生成html文件动态显示方法
    PHP7.0下安装DEDE织梦 出现 GD不支持的解决方法
    DEDECMS5.7支持伪静态的方法
    DEDECMS全站伪静态设置方法
    设置 SSH 通过密钥登录
    Windows安装OpenSSH服务
    VS Code远程开发工具错误-找不到SSH安装
    帝国CMS自定义列表的排序
    帝国CMS灵动标签e:loop的使用方法
    cisco 3750交换机堆叠后配置恢复方法
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13257617.html
Copyright © 2011-2022 走看看