Question

我正在使用FlexBox作为应用，我希望使用.text

在flex-grow: 1中裁剪文字

玉的布局：

  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

您必须使用min-width:0并在父级中设置一些flex-basis（删除flex-grow:1）

然后在子div中添加省略号效果的自然属性：

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

main {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
}
aside {
  display: flex;
  width: 200px;
  flex-shrink: 0;
  background: rgba(238, 130, 238, 0.5);
}
content {
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;
}
content section {
  display: flex;
  background: rgba(0, 128, 0, 0.2);
  flex-grow: 1;
}
content footer {
  display: flex;
  height: 70px;
  justify-content: center;
}
content footer .panel {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  background: rgba(0, 0, 255, 0.2);
  height: 100%;
}
content footer .panel .avatar {
  display: flex;
  background: rgba(255, 255, 0, 0.4);
  height: 70px;
  width: 70px;
  flex-shrink: 0;
}
content footer .panel .text {
  align-items: center;
  display: flex;
  flex-basis: 85%;
  margin-left: 10px;
  min-width: 0;
}
content footer .panel .text div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
content footer .panel .actions {
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
content footer .panel .actions .act {
  width: 40px;
  height: 40px;
  margin: 0 10px;
  background: rgba(238, 130, 238, 0.6);
}

<main>
  <aside></aside>
  <content>
    <section>Hello</section>
    <footer>
      <div class="panel">
        <div class="avatar"></div>
        <div class="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</div>
        </div>
        <div class="actions">
          <div class="act"></div>
          <div class="act"></div>
          <div class="act"></div>
        </div>
      </div>
    </footer>
  </content>
</main>

Answer 2

您可以使用常规JavaScript通过在-前加一行来为JADE中的给定字符串切片。例如- var myVar = 'contains a string'.slice(0,5)

在您的情况下，您可以更改您的JADE代码，Linux man page

.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-Solution

首先，您需要使用block或inline-block元素包装文本。如果您使用的是inline元素，则它不起作用，除非您使用css更改元素行为。如果你想阅读有关css nowrap和省略号的内容，here is the PEN。

这将是元素的go to this page

的CSS

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

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

2 个答案: