文本超出规定范围显示为省略号

最新推荐文章于 2023-04-24 17:05:04 发布

Byte_Dance

最新推荐文章于 2023-04-24 17:05:04 发布

阅读量1.4k

点赞数

分类专栏： HTML css

css 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta content="telephone=no" name="format-detection">
       <meta content="on" http-equiv="x-dns-prefetch-control">
       <title>测试css3实现超出文本指定行数(指定文本长度)用省略号代替的效果</title>
       <style>

           /*多行文本*/
            .multiLineTexts {                   /*设置文本为多行，如果超出长度用省略号代替*/
                width: 200px;
                display: -webkit-box;
                -webkit-line-clamp: 3;         /*限制在一个块元素显示的文本的行数*/
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

           /*单行文本*/
            .multiLineText      {
                width:300px;
                overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
                white-space:nowrap;
                overflow:hidden;
                text-overflow: ellipsis;
            }
       </style>
    </head>

   <body>

        <h1>测试单行文本:</h1>
        <div class="multiLineText">
            text-overflow: ellipsis可以用来多行文本的情况下，用省略号隐藏超出范围的文本 ；
            white-space: nowrap规定段落中的文本不进行换行;
            -webkit-box-orient：vertical限制在一个块元素显示的文本的行数
        </div>
        <h1>测试两行或者两行以上的文本:</h1>
        <div class="multiLineTexts">
            text-overflow: ellipsis可以用来多行文本的情况下，用省略号隐藏超出范围的文本 ；
            white-space: nowrap规定段落中的文本不进行换行;
            -webkit-box-orient：vertical限制在一个块元素显示的文本的行数
        </div>
    </body>

</html>