鍍金池/ 問(wèn)答/HTML5  HTML/ flex布局與文字超出顯示省略號(hào)問(wèn)題

flex布局與文字超出顯示省略號(hào)問(wèn)題

clipboard.png

如圖，左邊內(nèi)容右邊圖片。右側(cè)圖片固定寬度不設(shè)高度，左邊的寬度為總寬度-右側(cè)圖片占據(jù)的固定寬度超出文字顯示省略號(hào)
我用flex進(jìn)行布局樣式大概如下，現(xiàn)在的問(wèn)題是我怎么讓左側(cè)的文字超出省略,一下組合是不好用的，因?yàn)楸仨氁贫▽挾?，如果我給左側(cè)制定width:100%;那么會(huì)把整個(gè)li的寬度都占滿才會(huì)省略。圖片就會(huì)被擠飛
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;

li {display:flex;overflow:hidden;width:100%}
.left{flex-grow:1};
.right{flex:6rem;height:auto}
回答
編輯回答
硬扛

是我理解有問(wèn)題嗎？并沒(méi)有飛呀？

http://jsrun.net/UqZKp
clipboard.png

2017年8月10日 06:37
編輯回答
嘟尛嘴

用flex-shrink：0 讓右側(cè)不縮小

<style>
    #box {
        display: flex;
    }
    #box p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #box div {
        flex-shrink: 0;
        width: 100px;
        height: 300px;
        background-color: #e4b9b9;
    }
</style>
<div id="box">
    <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
    <div></div>
</div>
2017年11月9日 00:50