javascript - 当 header 具有文本溢出省略号时，在 header 内部的右侧 float 文本

Question

我有以下 HTML 和 CSS

div
{
    width: 450px;
    background-color: pink;
}

h1
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: yellow;
    
}

button
{
    float: right;
}

<div>
    <h1>LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT
        <button type="button">X</button>
    </h1>
</div>

https://jsfiddle.net/0k49bvo9/

我遇到的问题是如何使“x”按钮与文本在同一行上并向右浮动(就像文本较小时的外观一样)。

我无法修改 HTML，我只需要通过 CSS 实现，或者如果确实需要，通过 JS 实现。

Answer 1

与其让按钮向右浮动，不如将其绝对定位。

button {
    position: absolute;
    top: 0;
    right: 0;
}

对于相对于父元素 h1 的按钮定位，该按钮也必须相对或绝对定位。

所以你添加

h1 {
    position: relative;
}

在最后一步中，您向 h1 添加一些 padding-right 以确保您的省略号(或文本)不与按钮重叠:

h1 {
    padding-right: 20px;
}

https://jsfiddle.net/0k49bvo9/2/