flexbox 自动调整大小容器中的溢出文本

Question

我将FlexBox 用于应用程序，我想用flex-grow: 1 裁剪.text 中的文本

CodePen

翡翠布局：

  main
    aside
    content
      section Hello
      footer
        .panel
          .avatar
          .text
            div Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at
          .actions
            .act
            .act
            .act

Answer 1

您可以使用常规 JavaScript 对 JADE 中的给定字符串进行切片，方法是在新行前加上 - 前缀。例如- var myVar = 'contains a string'.slice(0,5)

在您的情况下，您可以像这样更改您的 JADE-Code，here is the PEN

.panel
  .avatar
  .text
  - var divContent = 'Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at'
  div.notTruncated= divContent 
  - var divContentTruncated = divContent.slice(0,180)
  div.truncated= divContentTruncated + '...'

CSS 解决方案

首先，您需要使用block 或inline-block 元素包装您的文本。如果您使用的是 inline 元素，则它不起作用，除非您使用 css 更改元素行为。如果您想了解有关 css nowrap 和省略号的内容，请go to this page。

这将是元素的 CSS，here is your PEN

.truncatedText {
  text-overflow: ellipsis;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;   
}