为什么css设置省略却不生效

总结

如果省略样式直接作用到的元素的内容并没有直接文本，则省略号不会生效。

• 纯文字 （文本）
• block元素 + 纯文字 （非文本）
• inline-block元素 + 纯文字 （文本）
• inline-block元素 + inline元素 （文本）
• inline-block元素 + inline-block元素 （非文本）
• inline元素 + 纯文字 （非文本）
• inline元素 + inline元素 （文本）
• inline元素 + inline-block元素 （非文本）
• 文本 + inline元素 （文本）
• 文本 + inline-block元素 （非文本）

(以上情况针对单传子元素的情况（一个元素只有一个子元素），多传子元素判断方法一致，不过需要把主体移到到各个子元素上)

html源码（1）

<div class="ellipsis">
    <div class="child">哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</div>
</div>

css源码（1.1）

   .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipis;
      white-space:nowrap;
    }
    
    .child{
        display: block;
    }

结果（1.1）

---

css源码（1.2）

   .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipis;
      white-space:nowrap;
    }
    
    .child{
        display: inline;
    }

结果（1.2）

---

css源码（1.3）

   .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipis;
      white-space:nowrap;
    }
    
    .child{
        display: inline-block;
    }

结果（1.3）

---

---

html(2)

    <div class="ellipsis">
    	<div class="child">
            <div class="grand-son">哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</div>
        </div>
    </div>

css源码（2.1）

    .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .child{
        display: inline-block;
    }

    .grand-son{
        display: inline-block;
    }

结果(2.1)

---

css源码(2.2)

    .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .child{
        display: inline-block;
    }

    .grand-son{
        display: inline;
    }

结果(2.2)

---

---

html源码（3）

<div class="ellipsis">
	<div class="child">
        <div class="grand-son">
            <div class="grand-son-son">哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</div>
        </div>
    </div>
</div>

css源码(3.1)

    .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .child{
        display: inline-block;
    }

    .grand-son{
        display: inline;
    }
    .grand-son-son{
        display: inline-block;
    }

结果(3.1)

---

css源码(3.2)

    .ellipsis{
      width: 200px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .child{
        display: inline-block;
    }

    .grand-son{
        display: inline;
    }
    .grand-son-son{
        display: inline;
    }

结果(3.2)