截断嵌套的柔性元素内的文本

我有一个嵌套的柔性容器，当它的宽度不足以显示时，我想截断文本（https://codepen.io/BigMike/pen/mmMxQN）。截断嵌套的柔性元素内的文本

我想要什么

（大屏幕）

（小屏幕采用截断）

我想我可以做到这一点

.truncated { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

但当我缩小卵石n，孩子达到了一个不会变小的点。

有什么建议吗？

来源

2017-05-04 Michael Parton

你能解释一下更想达到什么目的？ –

基于您的评论，如果添加此规则，它都将在一行上

.regular { 
    flex-shrink: 0;  /* won't allow element to become smaller than its content */ 
}

Updated codepen

.rows { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    flex-basis: 50%; 
 
    background-color: red; 
 
    min-width: 0px; 
 
} 
 
.nested-row { 
 
    display: flex; 
 
    padding: 20px; 
 
    background-color: blue; 
 
    justify-content: space-between; 
 
    color: white; 
 
} 
 

 
.nested-child { 
 
    border: solid white 1px; 
 
} 
 

 
.truncated { 
 
    overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
    border: solid white 1px; 
 
    min-width: 0; 
 
} 
 

 
.regular { 
 
    flex-shrink: 0; 
 
}

<div class="rows"> 
 
    <div class="child"> 
 
    <div class='nested-row'> 
 
     <div class="nested-child truncated"> 
 
     I want this text to truncate but it breaks on a small screen 
 
     </div> 
 
     <div class='nested-child regular'> 
 
     Now this doesn't wrap 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    Some other content 
 
    </div> 
 
    <div class="child"> 
 
    Some other content 
 
    </div> 
 
    <div class="child"> 
 
    Some other content 
 
    </div> 
 
</div>

来源

2017-05-04 07:03:59 LGSon

太棒了！它看起来像是在与原始版本有点不同的时候分开了这个codepen。所以我想补充说，为.child添加min-width：0px也是非常重要的。没有这个div将无法缩小截断文本div的长度，因为它有空格：nowrap –

@MichaelParton好的。由于所提及的'.child'和'.truncated'类已经有'min-width'，我不确定你的意思？ – LGSon

这是我的不好，原来的笔没有这个，我在发布问题后意外地改变了它。我恢复了它，所以问题仍然有意义。 –

-1

问题是空白属性。你可以像这样编辑你的样式表。

.truncated { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: wrap; 
}

来源

2017-05-04 03:35:50

这将包装而不是截断。我需要在一行上的所有内容 –

如果你想在一行上使用整个句子，这是不可能的，因为当缩小容器基本上是对文本进行推压时，如果它默认不符合新宽度，它会去到下一行字明智。你可以尝试使用'word-wrap：break-word;'代替，但我认为这不可能。 –

截断嵌套的柔性元素内的文本

回答

相关问题