html - 线性梯度问题 - 溢出与相邻文本重叠

Question

当我在小提琴中使用线性渐变作为背景颜色时：

http://jsfiddle.net/dkzn5/

html代码在哪里：

<div class="body">

1 个示例箭头

<div class="clear"></div>

溢出的文本必须隐藏，可见文本必须在单行 2

<div class="clear"></div>

文本在变体 2 的右端重叠。

你能帮我解决这个问题吗？

Answer 1

.variation2 h2 {
    width:90%;
    margin-right:10%;
}

Answer 2

减小字体大小或标题

.variation2 h2{width:90%;}

Answer 3

添加另一个带有填充的容器：

<div class="variation2 font700 green"> 
    <div style="padding-right: 80px;">
    <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>

</div>

http://jsfiddle.net/dkzn5/3/