Flex网格元素里面有长文本

Question

我有一个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;
}

Answer 1

您可以使用元素overflow: hidden;上的属性.title并将实际文本放置在具有以下内容的子元素中：text-overflow: ellipsis;

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