當你的內容比父母的內容寬時，如何隱藏圖像右側溢出的圖像？

我的headerDiv有兩個對象，一個標題和一個圖像。我希望標題顯示在左側，圖像顯示在右側。標題將動態更改爲不同的長度。 headerDiv的寬度應該保持不變。如何隱藏h1標籤中的溢出並顯示浮動在標題div右側的img標籤？跨度標記在填充時將圖像推送到下一行。當你的內容比父母的內容寬時，如何隱藏圖像右側溢出的圖像？

.headerDiv{ 
    width: 120px 
} 

h1 { 
    overflow: hidden; 
    white-space: nowrap; 
    width: 100px; 
} 

img{ 
    width: 20px; 
    float: right; 
} 


<div class="headerDiv> 
    <h1> 
    <span title="text"> 
     <spring:message code="${title}" text="${title}" /> 
     <span style="font-weight: normal;">Text</span> 
    </span> 
    </h1> 
    <img src="image.gif"/> 
</div>

來源

2012-01-02 coder

爲「顯示」樣式（內嵌塊，塊）嘗試不同的值。

來源

2012-01-02 18:54:40 danijar

希望有幫助...我沒有完全理解你的問題。 – danijar 2012-01-02 18:55:47

難道你不能只是將img標籤移動到h1標籤並調整寬度h1以適應？

來源

2012-01-02 18:55:06 waynethec

如果我把img標籤放入h1中，它會被溢出隱藏。這就是他們分開的原因。 – coder 2012-01-02 18:59:40

在CSS部分中，您只需放置「headerDiv」，您是否忘記放置期間，因此它是「.headerDiv」或者是您的文章中的拼寫錯誤？如果您忘記了，請嘗試將header作爲headerDiv當前未被限制爲120px，並且可能看起來不正確。 – waynethec 2012-01-02 19:05:49

謝謝，但這只是在文章中的錯字 – coder 2012-01-02 19:08:47

您可以使用gif作爲背景圖片，併爲您的h1定義一個空白右邊以防止在圖片上移動。

來源

2012-01-02 19:06:31 Robert

我需要圖片可點擊。 – coder 2012-01-02 19:09:58

我爲你創建代碼筆，我想這就是你要找的enter link description here。請詢問是否需要進一步解釋。

HTML

<button type="button"> 
    <span class="Name">Ibrahim Aziz asd asd asd asd asd asd</span> 
    <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-group-512.png"/> 
</button>

CSS

button 
{ 
    margin: 20px; 
    width: 180px; 
    height: 32px; 
    padding: 0px; 
    background-color: #3c3c3c; 
    border-style: solid; 
    border-color: transparent; 
    border-width: thin; 
    border-radius: 16px; 
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; 
} 

button img 
{ 
    margin-left: 12px; 
    margin-right: 12px; 
    width: 20px; 
    height: 20px; 
    align-self: center; 
} 

button span.Name 
{ 
    margin-left: 12px; 
    margin-right: 5px; 
    width: 100px; 
    font-weight: bold; 
    text-align: left; 
    color: #ffffff; 
    white-space: nowrap; 
    flex-grow: 1; 
    align-self: center; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

謝謝大家！

來源

2018-01-24 18:54:54 Bhimbim

當你的內容比父母的內容寬時，如何隱藏圖像右側溢出的圖像？

回答

相關問題