使用CSS图标：在保留文本以避免包装下

我有一个使用:before放置的图标，它后面的文本有时会包装成两到三行。当它将文字包裹在图标下时。使用CSS图标：在保留文本以避免包装下

我正在寻找CSS帮助保持文字在图标下方环绕。

这里是一个图像显示什么，我指的是：

当前CSS：

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before { 
    content: "\f1c1"; 
    font-family: 'FontAwesome'; 
    color: #999; 
    display: inline-block; 
    margin: 0px 10px 0 0; 
    font-size: 24px; 
    vertical-align: middle; 
} 
.form-title:before { 
    float: left; 
}

这里是我的代码小提琴： fiddle

来源

2016-04-19 William Cunningham

a[href $='.pdf']:before /*etc...*/ { 
 
    content: "\f1c1"; 
 
    font-family: 'FontAwesome'; 
 
    color: #999; 
 
    margin: 0px 10px 0 0; 
 
    font-size: 24px; 
 
    float: left; 
 
} 
 
.form-title span {    /* WRAP TEXT IN SPAN */ 
 
    display: block; 
 
    overflow: hidden; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 

 
<div style="width:220px/*DEMOONLY*/;"> 
 
    <a href="/xxx.pdf" class="form-title"> 
 
    <span>xxxxx - CO Private Passenger Auto Insurance (Summary Disclosure Notice)</span> 
 
    </a> 
 
</div>

来源

2016-04-19 13:17:18

感谢您的帮助。我用你的解决方案，它像一个魅力。 –

@WilliamCunningham Thx，不客气！ –

简单的解决方法是为您的文字在段落（或将其分配给您自己的班级），然后您可以使用这个。

p{ 

overflow: hidden; 

}

这是停止图像下的文字环绕。

发生了什么事情是，当你在一个盒子上设置一个特定的高度或宽度，并且它内部的内容不适合时，你必须指定如何处理。这就是css溢出属性进来。

来源

2016-04-19 13:14:56 izk

当前html的唯一方法是将填充到a元素和绝对位置的图标左侧。

a.form-title[href $='.pdf']:before, 
a.form-title[href $='.PDF']:before, 
a.form-title[href $='.pdf#']:before, 
a.form-title[href $='.PDF#']:before, 
a.form-title[href $='.pdf?']:before, 
a.form-title[href $='.PDF?']:before{ 
    position:absolute; 
    left:0; 
} 
a.form-title[href $='.pdf'], 
a.form-title[href $='.PDF'], 
a.form-title[href $='.pdf#'], 
a.form-title[href $='.PDF#'], 
a.form-title[href $='.pdf?'], 
a.form-title[href $='.PDF?']{ 
    position:relative; 
    display:inline-block; 
    padding-left:35px; 
    }

演示在https://jsfiddle.net/x0yyfxmm/3/

来源

2016-04-19 13:16:13

你:before伪元素是浮动的，所以你看到的是围绕浮动元素文本的天然包装。为了防止这种包装，你需要改变你定位伪元素的方式。

既然你的图标有固定的高度和宽度，你知道，为什么不添加填充到你的锚标记和绝对位置的图标？这样，填充将防止文本缠绕，并且您的图标将坐在您想要的位置。

a[href $='.pdf'], a[href $='.PDF'], a[href $='.pdf#'], 
a[href $='.PDF#'], a[href $='.pdf?'], a[href $='.PDF?'] { 
    display: inline-block; 
    padding-left: 30px; /* 20px icon width + 10px margin */ 
    position: relative; 
} 

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, 
a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before { 
    content: "\f1c1"; 
    font-family: 'FontAwesome'; 
    color: #999; 
    font-size: 24px; 
    vertical-align: middle; 
} 

.form-title:before { 
    left: 0; 
    position: absolute; 
    top: 0; 
}

And, here's your updated Fiddle showing that code in action.

来源

2016-04-19 13:19:28 ajm

使用CSS图标：在保留文本以避免包装下

回答

相关问题