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

Question

我正在为应用程序使用 FlexBox，我想使用 flex-grow: 1 在 .text 中裁剪文本

CodePen

Jade 布局:

  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 代码，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;   
}