菜鸟篇---- a标签中溢出文本显示省略号

ul li a{
       color: #444444;
       width: 288px; 
       white-space: nowrap; 
       overflow: hidden; 
       text-overflow: ellipsis;
       background-color: brown;
   }

   /*该样式代码是错误样例，原因已经写在下文中*/
      /*  ------------请勿复制错误样例----------------*/

          <ul>
                <li><a href="#">能用百度搜索找到的答案，就不要轻易麻烦身边的人。a>li>
                <li><a href="#">机会是留给努力奋斗的人的，有谁的幸运，凭空而来？ a>li>
                <li><a href="#">喜机会是留给努力奋斗的人的，有谁的幸运，凭空而来？a>li>
                <li><a href="#">能用百度搜索找到的答案，就不要轻易麻烦身边的人。a>li>
         ul>

溢出文本省略号的属性已经用过好多次，有的案例写在li里，有的案例写在a中，目前还不明白二者的区别，应该是二者都可以使用。
（个人心得：写在li中和a标签中都可以，但是写在a标签中，给a设置大小，可以使得鼠标点击时的范围不仅仅局限于文字上，才能实现跳转页面，而写在li中，鼠标必须点到文本，范围较小。）

在溢出文本省略号设置中，我写到a标签中，但是这次写的时候没有实现，排查了一圈，发现是a标签不是块状元素，本身并不能设置宽高，需要用浮动属性float或者display：block；将a标签转换为块元素，再为其设置宽度。

ul li a{
        float:left; /*更改元素类型，也可以使用display：block；复制使用时，请注意中英文符号*/
        color: #444444;
        width: 288px;
         white-space: nowrap; 
         overflow: hidden; 
         text-overflow: ellipsis;
         background-color: brown;
    }

单行文本溢出裁剪显示省略号四个步骤缺一不可：

1. 为容器设置宽度width： value；（px，%均可）
2. 强制文本在一行内显示：white-space：nowrap；
3. 溢出文本隐藏：overflow：hidden；
4. 溢出文本显示省略号：text-overflow：ellipsis；

单独设置溢出显示省略号的属性时，并不具备其它样式的时候，是不能实现文本溢出显示省略号的效果的。

另外需要注意的是，li中单行文本最好设置高度，在li>a标签中设置浮动，很容易出现高度塌陷。

2021年6月21日更-------------------------------------------------------------------------------------

css样式表的第一段代码是错误样例的，下面有解释文案，因为样式是写给内联元素a的，所以需要给a更改元素类型。
另外请注意本篇文章是实现单行文本省略号的，如果没有实现效果，请检查代码中截取的width宽度值、a标签的元素类型是不是没有改、中英文符号的切换、代码样式是否复制成错误样例等等。
如仍有问题，欢迎大家私聊探讨。