Question

我有一个3列的弹性布局，您可以在此fiddle

中看到

有什么办法可以告诉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/

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网格元素里面有长文本

2 个答案: