Question

我有一个使用:before放置的图标，其后面的文字有时会包裹两到三行。当它包装文本时，图标下方。

我正在寻找CSS帮助，以防止文字被包裹在图标下。

这是一张显示我所指的内容的图像：
fiddle

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

这是我的代码的小提琴： {{3}}

Answer 1

向左浮动资产
溢出隐藏文本元素

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>

Answer 2

你的: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.

Answer 3

简单的解决方案是将文字放在段落中（或者根据自己的喜好分配给自己的班级），然后就可以使用它了。

p{

 overflow: hidden;

}

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

当您在盒子上设置特定的高度或宽度并且其中的内容不适合时，您必须指定如何处理它。这就是 css溢出属性的用武之地。

Answer 4

当前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/

演示

CSS图标使用：保持文本不被包装

4 个答案: