在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ flex布局與文字超出顯示省略號問題

flex布局與文字超出顯示省略號問題

clipboard.png

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

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

是我理解有問題嗎？并沒有飛呀？

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

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

用flex-shrink：0 讓右側不縮小

<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>內容內容內容內容內容內容內容內容內容內容內容內容</p>
    <div></div>
</div>
2017年11月9日 00:50