使用:before的CSS图标，可防止文本在下面环绕 [英] CSS icon using :before keep text from wrapping under

问题描述

我使用:before放置了一个图标，其后的文本有时会换成两行或三行.换行时，文本将位于图标下方.

I have an icon placed using :before and the text following it sometimes wraps to two or three lines. When it wraps the text goes under the icon.

我正在寻找CSS帮助，以防止文本在图标下方换行.

I am looking for CSS help to keep the text from wrapping under the icon.

以下是显示我所指的图像:

Here is an image showing what I am referring to:

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

这里是我的代码的小提琴: 小提琴

Here is a fiddle with my code: fiddle

推荐答案

• 向左浮动资产
• 隐藏了上溢文本元素
• Float left the asset
• Overflow hidden the text element

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>

这篇关于使用:before的CSS图标，可防止文本在下面环绕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！