使用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圖標：在保留文本以避免包裝下

回答

相關問題