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;
}

这是更新的fiddle。

Answer 2

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

div中的文本溢出

2 个答案: