如何在使用伪元素时隐藏溢出文本（：before＆：after）？

Question

我正在为坐在内容div上的有角度的选项卡设计高级样式。

我刚刚解决它，下面的建议遵循：之前和之后：塑造div。但是，我坚持试图让DIV本身使用的最大宽度，而不是宽度：

HTML

<br> 
<div class="tab">Really really really really really really long content title</div> 
<div class="tab-content">Content text</div> 

CSS

。

tab-content, .tab, .tab:before, .tab:after { 
    background-color: #f5f5f5; 
} 
body { 
    background-color: #666; 
} 
.tab-content { 
    border-left: 1px solid blue; 
    border-right: 1px solid blue; 
    border-bottom: 1px solid blue; 
    border-top: 1px solid blue; 
    margin-top: -1px; 
    padding-top:10px; 
    padding-bottom:20px; 
    padding-left:10px; 
    padding-right:10px; 
} 
.tab:before { 
} 
.tab { 
    max-width: 150px; 
    display:block; 
    border-left: 1px solid blue; 
    border-top: 1px solid blue; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    height: 50px; 
    border-radius: 15px 100px 0px 0px; 
    position: relative; 
    z-index: 100000000; 
    line-height:50px; 
    padding-left:20px; 
} 
.tab:after { 
    border-right: 1px solid blue; 
    border-top: 1px solid blue; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 00px; 
    display: block; 
    content:" "; 
    width: 150px; 
    height: 50px; 
    top: -1px; 
    position: absolute; 
    right: -28px; 
    transform:skewX(45deg); 
    -ms-transform:skewX(45deg); 
    -webkit-transform:skewX(45deg); 
    z-index: -1; 
} 

任何想法？

的jsfiddle这里：http://jsfiddle.net/robmc/ZvEyx/9/

Answer 1

如果你不是太讲究的语义，你可以尝试：

<div class="tab"><div>Really really really really really...</div></div> 

，并添加以下CSS规则：

.tab div { 
    outline: 1px dotted blue; /* for demo only... */ 
    overflow: hidden; 
    height: inherit; 
} 

孩子<div>可以通过一个头所取代，这可能帮助SEO。

小提琴：http://jsfiddle.net/audetwebdesign/dyCXT/

Answer 2

一种方法是设置在.tab文字颜色为透明，然后使用:first-line伪元素只设置文本的第一行有一个颜色。

.tab { 
    color: transparent; 
} 
.tab:first-line 
{ 
    color: #000; 
} 

这里有一个jsFiddle

编辑

我有一点与它鼓捣，我想一个更漂亮的解决方案是在.tab的font-size和line-height设为0px。然后使用:first-line伪元素将它们设置为任何你喜欢的。这样，当选择文本时（这是我的原始答案的问题），不可见线条将不可见。

.tab:first-line { 
    font-size: 16px; 
    line-height: 50px; 
} 
.tab { 
    font-size: 0px; 
    line-height: 0px; 
} 

这里有一个jsFiddle这种方法。