如何在方向列 flexbox 子项中截断字符串 [英] How to truncate string inside a direction column flexbox child
问题描述
我翻阅了csstricks的文章,https://css-tricks.com/flexbox-截断文本/
我的问题是当 .flex-parent
具有 flex-direction: column;
属性时如何使其工作.
感谢您的帮助!
这实际上只是重新排列一些属性的问题,但这个答案自然取决于项目的需要.
这里的要点是,如果您希望它成为一列,那么您在 .flex-parent
中包含的每个顶级元素本质上都会在设置为列方向时显示为.因此,它的右边没有任何东西可以截断.
所以本质上,如果您希望顶级元素成为一列并截断其中的内容,那么实现它的一种方法是将它们都包含在同一行"或 .flex-child 中代码>.然后该行是您可以识别 justify 和 aligning 属性的地方.
.flex-parent {显示:弹性;弹性方向:列;填充:10px;边距:30px 0;}.flex-子{显示:弹性;对齐内容:间隔;对齐项目:居中;}.long-and-truncated-with-child-corrected {弹性:1;最小宽度:0;/* 或一些值 */}.long-and-truncated-with-child-corrected h2 {空白:nowrap;溢出:隐藏;文本溢出:省略号;}.short-and-fixed >div {宽度:30px;高度:30px;边框半径:10px;背景:浅绿色;显示:inline-flex;}/*非必需品*/身体 {填充:40px;}h2{字体大小:1rem;字体粗细:正常;}.flex-父{背景:RGBA(0,0,0,0.1);}
<div class="flex-child long-and-truncated-with-child-corrected"><h2>这是一个<em>长字符串</em>可以截断,谢谢.如果字符串是 <b>REALLY</b>截断的<div class="flex-child short-and-fixed"><div></div><div></div><div></div>
I went over the article from csstricks, https://css-tricks.com/flexbox-truncated-text/
My question how to make it work when the .flex-parent
has flex-direction: column;
property.
Thanks for help!
This really is just a matter of rearranging some properties, but naturally this answer depends on the projects needs.
Takeaways here are, if you want it to be a column, by nature every top-level element you include in the .flex-parent
, when it's set to column direction, will display as such. Therefore, there will be nothing to the right of it to truncate with.
So essentially, if you want top-level elements to be a column AND truncate content inside of it, then one way of accomplishing it is by including both of them in the same 'row' or .flex-child
. Then the row is where you could identify the justify and aligning properties.
.flex-parent {
display: flex;
flex-direction: column;
padding: 10px;
margin: 30px 0;
}
.flex-child {
display: flex;
justify-content: space-between;
align-items: center;
}
.long-and-truncated-with-child-corrected {
flex: 1;
min-width: 0; /* or some value */
}
.long-and-truncated-with-child-corrected h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.short-and-fixed > div {
width: 30px;
height: 30px;
border-radius: 10px;
background: lightgreen;
display: inline-flex;
}
/*nonessentials*/
body {
padding: 40px;
}
h2 {
font-size: 1rem;
font-weight: normal;
}
.flex-parent {
background: rgba(0,0,0,0.1);
}
<div class="flex-parent">
<div class="flex-child long-and-truncated-with-child-corrected">
<h2>This is a <em>long string</em> that is OK to truncate please and thank you. Some more text to demonstrate, if the string is <b>REALLY</b> truncated</h2>
<div class="flex-child short-and-fixed">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
这篇关于如何在方向列 flexbox 子项中截断字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!