css – 内部包含长文本的Flex网格元素

我在这个 fiddle中有一个3列的flex布局 有什么办法可以告诉flex元素椭圆形还是破坏这个长文本？正如您在第一列中看到的那样,我有一个很长的词,如果您调整预览窗口的大小,此列将打破3列

... . . 我在这个 fiddle中有一个3列的flex布局

有什么办法可以告诉flex元素椭圆形还是破坏这个长文本？
正如您在第一列中看到的那样,我有一个很长的词,如果您调整预览窗口的大小,此列将打破3列布局.
还有其他解决方案吗？

代码(相同的小提琴)
HTML：

<div class="container" >    <div class="title">        LONG STRINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG    </div>    <div class="tags">        <span class="place-tag" > Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>        <span class="place-tag"> Test </span>    </div>    <div style="background-color:blue" >        END    </div></div>

CSS：

.container{    display: flex;    flex-wrap: no-wrap;    flex-direction: row;    justify-content: space-around;}.title{    background-color:red;    flex-grow:1;    display:flex;    flex-wrap:wrap;}.place-tag{   display:inline-block;}.tags{    background-color:green;     flex-grow:1;    flex-shrink:1;    display:flex;    justify-content:flex-end;    flex-wrap:wrap;}

.

解决方法

. 你可以使用overflow：hidden; .title元素上的属性,并将实际文本放在具有文本溢出的子元素中：省略号;

.container{    display: flex;    flex-wrap: no-wrap;    flex-direction: row;    justify-content: space-around;}.title{    background-color:red;    flex-grow:1;    display:flex;    overflow: hidden;    flex-wrap:wrap;}.title > span{  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden; }.place-tag{   display:inline-block;}.tags{    background-color:green;     flex-grow:1;    flex-shrink:1;    display:flex;    justify-content:flex-end;    flex-wrap:wrap;}

<div class="container" ><div class="title"><span>LONG STRINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</span></div><div class="tags"  >  <span class="place-tag" > Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span>  <span class="place-tag"> Test </span></div><div style="background-color:blue" >END</div></div>

关于文本溢出的好消息：https://css-tricks.com/almanac/properties/t/text-overflow/

. . .. ...