如何在文本很長的時候在flex顯示中打破文本？

Question

我需要製作一個響應式網頁，以便父級的寬度是動態的。 有兩個彈性項目，一個是長（動態），另一個是短（靜態）。

我希望結果看起來像第二行，長文本被打破（或重疊時隱藏），並且短文本始終正確顯示。

我試圖使用flex-shrink: 0但似乎總是有溢出。

在這種情況下，我該如何擺脫溢出？

我確實需要flex佈局，而js不應該參與。

.parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 15rem; 
 
    background: yellowgreen; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
} 
 
.flex-item { 
 
    width: 10em; 
 
    padding: 10px; 
 
    background: yellow; 
 
    flex: 1 1 50%; 
 
} 
 
.block1 { 
 
    background: red; 
 
} 
 
.block2 { 
 
    background: orange; 
 
} 
 
.nos { 
 
    flex-shrink: 0 !important; 
 
}

<div class="parent"> 
 
    <div class="flex-item"> 
 
    <div class="block1"> 
 
     longlonglonglonglonglonglonglonglonglonglonglonglonglong 
 
    </div> 
 
    </div> 
 
    <div class="flex-item nos"> 
 
    <div class="block2"> 
 
     Display 
 
    </div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="parent"> 
 
    <div class="flex-item"> 
 
    <div class="block1"> 
 
     longlonglonglonglong... 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="block2"> 
 
     Display 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/templefox/Lw3hhz8j/

Answer 1

.parent { 
 
    display: flex; 
 
    width: 15rem; 
 
    padding: 10px; 
 
    background: yellowgreen; 
 
    /* overflow: hidden  <-- not necessary at this point */ 
 
    /* flex-direction: row <-- default value; can be omitted */ 
 
} 
 
.flex-item { 
 
    /* width: 10em   <-- not necessary at this point */ 
 
    /* flex: 1 1 50%   <-- not necessary at this point */ 
 
    padding: 10px; 
 
    background: yellow; 
 
    display: flex;   /* new */ 
 
    min-width: 0;    /* see note #1 */ 
 

 
} 
 
.block1 { 
 
    width: 10em; 
 
    overflow: hidden;   /* see note #2 */ 
 
    text-overflow: ellipsis; /* see note #2 */ 
 
    white-space: nowrap;  /* see note #2 */ 
 
    background: red; 
 
} 
 
.block2 { 
 
    background: orange; 
 
} 
 

 
/* .nos { flex-shrink: 0 !important; } */

<div class="parent"> 
 
    <div class="flex-item"> 
 
    <div class="block1">longlonglonglonglonglonglonglonglonglonglonglonglonglong</div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="block2">Display</div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="parent"> 
 
    <div class="flex-item"> 
 
    <div class="block1">longlonglonglonglong...</div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="block2">Display</div> 
 
    </div> 
 
</div>

revised fiddle

注意看它：

1. Why doesn't flex item shrink past content size?
2. Applying an ellipsis to multiline text

Answer 2

這樣的事情。

*{ 
 
    box-sizing:border-box; 
 
} 
 
.parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 16rem; 
 
    background: yellowgreen; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.flex-item { 
 
    width: 100%; 
 
    padding: 10px; 
 
    background: yellow; 
 
    flex: 1 1; 
 
} 
 
.block1 { 
 
    background: red; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding-right:70px; 
 
} 
 
.block2 { 
 
    background: orange; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.nos { 
 
    flex-shrink: 0 !important; 
 
    position: absolute; 
 
    right: 10px; 
 
    max-width: 70px; 
 
}

<div class="parent"> 
 
    <div class="flex-item"> 
 
    <div class="block1"> 
 
     longlonglonglonglonglonglonglonglonglonglonglonglonglong 
 
    </div> 
 
    </div> 
 
    <div class="flex-item nos"> 
 
    <div class="block2"> 
 
     Display 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

只是把word-break:break-all屬性，其parent股利。您可以通過點擊此link