溢出文本省略号表示-无法正常显示

溢出文本省略号表示-发现的奇怪事情

html代码

 <!-- 单行文本 -->
    <div class="box1">
        啥也别说，此处省略一万字
    </div>
     <!-- 多行文本 -->
    <div class="box2">
        啥也别说，此处省略一万字， 啥也别说，此处省略一万字
    </div>

1.单行文本

css代码

 .box1 {
            width: 150px;
            height: 80px;
            background-color: paleturquoise;
            /* 自动换行 */
            /* white-space: normal; */
            /* 1.强制文字一行显示 */
            white-space: nowrap;
            /*  2.让溢出的部分隐藏*/
            overflow: hidden;
            /* 溢出的部分用省略号表示 */
            text-overflow: ellipsis;
        }

运行效果：

重点咱们看多行文本溢出部分省略号表示

2.多行文本

*css代码*

  .box2 {
            width: 150px;
            height: 45px;
            background-color: paleturquoise;
            margin: 100px auto;
            /* 让文本显示两行 溢出的部门用省略号表示 */
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }

运行效果：

这都很正常，然后呢我就练习一下熟练度，把div的值全写成数字和英文字母就发现下面那些css样式没有作用！！！但是改成中文字符就可以！！！

            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
            overflow:hidden;

后续后续 家人们 只对乱的数字英文字母无效 如果是英文的话也可以！！!具体原因我也没查到。我猜的作用原理应该是在判断最后加省略号的时候，对中文英文肯定不会截一半这样子 ，如果就全是乱序的数字英文字母就无法判断是单词还是中文。。。嗯 应该这样

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
  
</p>

*运行结果：