当你的内容比父母的内容宽时，如何隐藏图像右侧溢出的图像？

我的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

当你的内容比父母的内容宽时，如何隐藏图像右侧溢出的图像？

回答

相关问题