Question

我正在研究一种位于内容div上的倾斜选项卡的高级样式。

我刚刚解决了它，按照以下方式创建建议：之前和之后：塑造div。但是，我试图让div本身使用max-width而不是width：

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

修改

我对它有点修补，我认为一个更好的解决方案是将font-size和line-height .tab设置为0px。然后使用:first-line伪元素将它们设置为您喜欢的任何内容。这样，当选择文本时，不可见的线条将不可见（这是我的原始答案的问题）。

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

这种方法的 jsFiddle 。

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

2 个答案: