Question

我有以下HTML和CSS

＆＃13;

div
{
    width: 450px;
    background-color: pink;
}

h1
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: yellow;
    
}

button
{
    float: right;
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/0k49bvo9/

我遇到的问题是如何制作＆＃39; x＆＃39;按钮与文本在同一行上向上并向右浮动（就像文本较小时的样子一样）。

我无法修改HTML，我只需要通过CSS实现这一点，或者如果真的有必要，可以通过JS来实现。

Answer 1

你可以做这样的事吗？

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

h1
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: yellow;
    position:relative; /* adding this */
}

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

添加相对于H1的位置意味着具有绝对定位的按钮不会破坏h1的边界，这意味着它将位于文本的顶部

Answer 2

不要让按钮浮动，你可能想要绝对定位。

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

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

所以你添加

h1 {
    position: relative;
}

在最后一步中，您向h1添加一些填充权限，以确保您的省略号（或文本）不与按钮重叠：

h1 {
    padding-right: 20px;
}

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

当标题有文本溢出省略号时，在标题内右侧浮动文本

2 个答案: