CSS溢出隐藏和浮动元素

Question

我想要一个在右侧中间有一个十字图标的项目列表。为了做到这一点，我使用了一个有一些填充的锚点，向右漂浮，并且相对定位。该图标是已知的宽度和高度。

这些项目也有一些文本，也应该垂直居中。额外的问题是，这个文本有一个任意长度，我不想任何溢出或包装。文字不得与图标重叠，并且必须允许其上升。

拼图的最后一部分是每个项目的宽度必须增长到其父项的大小。高度应该保持不变。

下面是一个例子（https://jsfiddle.net/bj6806u6/3/）

div { 
 
    background-color: red; 
 
    padding-right: 50px; 
 
    display: inline-block; 
 
    width: 80%; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
} 
 

 
p { 
 
    background-color: yellow; 
 
    height: 20px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    max-width: 100%; 
 
} 
 

 
a { 
 
    background-color: green; 
 
    float: right; 
 
    position: relative; 
 
    padding: 10px; 
 
    top: 6px; 
 
    right: -44px; 
 
}

<div><p>This is a short paragraph.</p><a>X</a></div> 
 
<br /><br /> 
 
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>

卸下-44px;，这是比较明显的一点是什么问题，但我仍然不知道如何解决它。当然，这一定是可能的，这似乎是一个微不足道的问题。

所以我的问题：如何保持交叉向下移动？我希望它总是看起来像第一个div。

Answer 1

你可以用定位而不是浮动。外部div获取相对位置，然后x获得绝对定位。它位于集装箱高度的顶部50％的下方，然后负值边缘回到x的高度的一半以将其放置在中间。

div { 
 
    background-color: red; 
 
    padding-right: 50px; 
 
    display: inline-block; 
 
    height: 50px; 
 
    position: relative; 
 
    max-width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
p { 
 
    background-color: yellow; 
 
    height: 20px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    max-width: 100%; 
 
} 
 

 
a { 
 
    background-color: green; 
 
    position: absolute; 
 
    padding: 10px; 
 
    top: 50%; 
 
    right: 4px; 
 
    margin-top: -19px; 
 
}

<div><p>This is a short paragraph.</p><a>X</a></div> 
 
<br /><br /> 
 
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>

Answer 2

如果“X”的宽度是已知的或固定的，则可以限制相邻文本的最大宽度以确保“X”未移动或重叠。

div { 
     background-color: red; 
     padding-right: 50px; 
     display: inline-block; 
     width: 80%; 
     vertical-align: middle; 
     height: 50px; 
    } 

    p { 
     background-color: yellow; 
     height: 20px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     display: inline-block; 
     max-width: calc(100% - 30px); 
    } 

    a { 
     background-color: green; 
     float: right; 
     position: relative; 
     padding: 10px; 
     top: 6px; 
     right: -44px; 
     width:10px; 
    } 

Answer 3

这是否帮助？

div { 
background-color: red; 
padding-right: 50px; 
display: inline-block; 
width: 80%; 
vertical-align: middle; 
height: 50px; 
position: relative; 
} 

p { 
background-color: yellow; 
height: 20px; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
display: inline-block; 
max-width: 100%; 
} 

a { 
background-color: green; 
    float: right; 
    position: absolute; 
    padding: 10px; 
    top: 6px; 
    right: 10px; 
} 

我定位div相对，然后使图标从右边的绝对浮动。现在知道这是你的意思......

Answer 4

https://jsfiddle.net/bj6806u6/7/

看代码，你并不需要设置padding-right上div和right上a（1 & 3），设置pmax-width到完全宽度减去50px（2）以获得十字的空间。

div { 
 
    background-color: red; 
 
    /* padding-right: 50px; */ /* 1 */ 
 
    display: inline-block; 
 
    width: 80%; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
} 
 

 
p { 
 
    background-color: yellow; 
 
    height: 20px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    max-width: calc(100% - 50px); /* 2 */ 
 
} 
 

 
a { 
 
    background-color: green; 
 
    float: right; 
 
    position: relative; 
 
    padding: 10px; 
 
    top: 6px; 
 
    /* right: -44px; */ /* 3 */ 
 
}

<div> 
 
    <p> 
 
    This is a short paragraph. 
 
    </p> 
 
    <a>X</a> 
 
</div> 
 
<br /> 
 
<br /> 
 
<div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <a>X</a> 
 
</div>

Answer 5

我已经保持固定的宽度和扩大在hover.Is这是你寻求的解决方案的文本？

div { 
    background-color: red; 
    padding-right: 50px; 
    display: inline-block; 
    width: 80%; 
    vertical-align: middle; 
    height:auto; 
} 

p { 
    background-color: yellow; 
    height: 20px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    display: inline-block; 
    max-width: 100%; 
} 

.wrapR 
{ 
max-width:80%; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 



} 
.wrapR:hover { 
background-color: yellow; 
overflow: visible; 
} 

a { 
    background-color: green; 
    float: right; 
    position: relative; 
    padding: 10px; 
    top: 6px; 
    right: -44px; 
} 

Answer 6

没什么需要更改添加div位置的相对位置，将标记位置绝对改为-44px改为5px。Live FIddle

div { 
 
    background-color: red; 
 
    padding-right: 50px; 
 
    display: inline-block; 
 
    width: 80%; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
    position: relative; /*add position relative */ 
 
} 
 

 
p { 
 
    background-color: yellow; 
 
    height: 20px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    max-width: 100%; 
 
} 
 

 
a { 
 
    background-color: green; 
 
    float: right; 
 
    position: absolute; /*Change relatie to absolute */ 
 
    padding: 10px; 
 
    top: 6px; 
 
    right: 5px;/*Change -44 to 5px*/ 
 
}

<div> 
 
    <p> 
 
    This is a short paragraph. 
 
    </p> 
 
    <a>X</a> 
 
</div> 
 
<br /> 
 
<br /> 
 
<div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <a>X</a> 
 
</div>