【问题标题】:Overflow text in flexbox autosize containerflexbox 自动调整大小容器中的溢出文本
【发布时间】:2016-07-02 13:23:25
【问题描述】:

我将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

【问题讨论】:

  • 我想要这样:[[ ][ lorem ipsum dolos rolese...][[ ][ ][ ]]]
  • 你能详细说明一下吗?您希望.text div 的行为如何?
  • 我想做页脚最大宽度(可用宽度 - section 宽度)。在footer .panel 中设置.avatar.actions 固定宽度。但是.text 必须是可用空间的最大宽度,仅此而已。并用省略号裁剪.text 中的文本
  • 我需要 CSS 解决方案
  • @LestaD 请编辑您的问题提供更多详细信息 - 它们不属于 cmets。这变得非常难以阅读。

标签: html css pug flexbox


【解决方案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 解决方案

首先,您需要使用blockinline-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;   
}

【讨论】:

  • 但我不知道要切片的符号的正确数量。因为,我有手机、平板电脑和台式机
  • 你应该说你需要一个 CSS 解决方案...我会编辑我的 awnser 以适应你的问题。
猜你喜欢
  • 2014-03-22
  • 1970-01-01
  • 2019-08-13
  • 1970-01-01
  • 1970-01-01
  • 2021-01-15
  • 2010-10-15
  • 1970-01-01
相关资源
最近更新 更多