text-overflow：省略号在sass上不起作用

Question

我正在一个项目上，看起来像文本溢出：省略号在sass中不起作用。

.content
  background-color: green
  text-overflow: ellipsis

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这里是项目的link

Answer 1

添加所有必需的规则后，它可以正常工作。我修改了您的代码。

.content
  background-color: green
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden

Here和here，您可以详细了解text-overflow属性。

  

以下两个属性都是文本溢出所必需的：

     

  
• 空白：nowrap;
  
• 溢出：隐藏；
  

Link to altered Codepen。