<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>flex布局实现</title>     <style type="text/css">         body {             margin: 0;             }                 .container {               background: pink;             width: 500px;               display: flex;             align-items: center;    /*垂直居中*/            }         .left-text {             text-overflow: ellipsis;             overflow: hidden;             white-space: nowrap;        }    </style> </head> <body> <div class="container">        <div class="left-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ullam consectetur nostrum aspernatur id ut, magnam nesciunt sit doloribus in vitae sint illo deleniti maxime soluta animi. Ipsa, dolores, veniam?</div>                     <span>1</span>            <span>2</span>            <span>icon3</span>            <span>icon4</span>            <span>icon5</span>            <span>icon6</span>                   </div> </body> </html>
点赞 评论
牛客网
牛客企业服务