文本溢出和向右浮动的问题答案

【问题标题】：Issue with text-overflow and float right文本溢出和向右浮动的问题
【发布时间】：2014-06-21 05:10:42
【问题描述】：

这里是 jsfiddle http://jsfiddle.net/DBEHJ/7/

我有一个带有标题的 div 'header' 和一个显示在 'div' 右侧（浮动：右侧）的“关闭”按钮。我正在使用 text-overflow: ellipsis 作为标题，但如果我使用它，关闭按钮（浮动：右）将不再出现。这种行为在所有浏览器中并不一致。下面是代码

<div class="header"> 
    <span class="title">A Very Long Title</span>
    <span class="closeButton"> [X] </span>
</div> 

.header {
    height: 49px !important;
    border: 1px solid #d3d3d3;
    background-color: #E5E5E5;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header .title {
  line-height: 50px;
  margin: 20px;
  font-size: 18px;
  color: #444444;
}

.closeButton {
    float:right; 
    margin: 10px;
}

感谢任何回复。

【问题讨论】：

感谢您的回复，会出现关闭按钮，但是当给出长标题时，标题和关闭按钮会重叠，就像jsfiddle.net/7FzCj/3 一样，我需要文本溢出才能在这种情况下工作跨度>

标签： html css

【解决方案1】：

您可以像这样在.closeButton 上使用position:absolute：

.header {
    ...
    position:relative;
}

.closeButton {
    position:absolute;
    top:0;
    right:0;
    margin: 10px;
}

Fiddle Demo

编辑

要在标题过长时为关闭按钮留出一些空间，您可以在标题中添加一些 padding-right，并在其 width 中减去它，使其保持 200 像素。

.header{
    ...
    width:170px;
    padding-right:30px;
}

Fiddle Demo

【讨论】：

感谢回复，出现了关闭按钮，但是当给出长标题时，标题和关闭按钮重叠，如jsfiddle.net/7FzCj/3中所示

【解决方案2】：

只要切换标题和按钮的顺序就可以了

<div class="header"> 
    <span class="closeButton"> [X] </span>
    <span class="title">A Very Long LongTitle</span>
</div>

FIDDLE

【讨论】：

【解决方案3】：

您可以使用top、right、margin css 属性来执行此操作。

您只需将top 和right 属性设置为零，并将margin 设置为自动。

我修改了@blex 的答案。 Infact 单行边距 css。

.closeButton {
    position:absolute;
    top:0;
    right:0;
    margin: 0 auto;
}

FIDDLE

希望对你有帮助

【讨论】：