html - div中的文本溢出

Question

这是我正在使用的小提琴：http:
//jsfiddle.net/hDyKs/1/

HTML 是：

<div class="body">

    <div class="variation1 font700 green"> <h2> 1 <span class="divider">sample arrow </span> </h2>  </div>
    <div class="clear"></div>

    <div class="variation2 font700 green2 "> <h2> overflown text must be hidden and the visible text  must be in single line <span class="divider"> 2 </span> </h2> </div>
    <div class="clear"></div>
</div>

我需要隐藏溢出的文本，可见的文本必须在一行中呈现。有人可以帮我吗？如果我使用overflow:hidden尖头部分正在消失。

Answer 1

添加white-space: nowrap;以约束文本布局，即限制文本换行到下一行。添加溢出隐藏以隐藏出现在外部的文本variation2。

.variation2 h2 {
    white-space:nowrap;
    overflow:hidden;
    padding-left: 0.2%;
}

这是jsfiddle。

更新：

将垂直分隔符和数字包含在variation2.

.variation2 h2 {
    background-color:inherit;
    white-space:nowrap;
    overflow:hidden;
    padding-left: 0.2%;
}

.variation2 h2 span{
    background-color:inherit;
    position:absolute;
    right:0;
}

这是更新的小提琴。

Answer 2

尝试使用text-overflow:ellipsis;它会...在发生溢出时放置，或者您可以尝试text-overflow:clip;它会隐藏溢出的文本。在这两种情况下，如果您在 html 中的文本是单行（即没有<br />） ，则文本将显示在单行中