内部带有长文本的 Flex 网格元素

Question

我有一个 3 列的灵活布局，正如您在这个 fiddle

中看到的

有什么方法可以让 flex 元素省略或打断这个长文本？正如您在第一栏中看到的，我有一个长词，如果您调整预览 window 的大小，该栏将打破 3 栏布局。还有其他解决方案吗？

代码（与fiddle相同） 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

您可以在 .title 元素上使用 overflow: hidden; 属性并将实际文本放在具有 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/

Answer 2

你甚至可以使用 "word-wrap:break-word"，它对我有用：

word-wrap: break-word;
padding-top:30px;
padding-left:50px;
padding-right:50px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: normal

内部带有长文本的 Flex 网格元素

Flex grid elements with long text inside

html

css

flexbox