[英]Force no line-break on pseudo element (:after)
http://codepen.io/ethanclevenger91/pen/vNjOyP
編輯:此CodePen現在展示了各種建議的解決方案
如果您調整這支筆的可用空間大小,您會看到在標題的頂部,您最終會到達菱形(通過偽元素創建)會斷行的位置,但是最后一個單詞不會斷行,因此偽元素是獨立的。
我想使用純CSS來設計一種解決方案,其行為類似於第二個標題,如果偽元素中斷,則最后一個單詞也會中斷。 目前,我已經通過Javascript實現了它,因為標題的內容將來自數據庫。
HTML:
<div class="container">
<h1 class="alpha">A heading that takes up nearly the entire width</h1>
<h1 class="alpha solution1">A solution that would require Javascript</h1>
</div>
SCSS:
$brand-primary:lightblue;
$brand-secondary:darken(lightblue, 40%);
@mixin hidpi($ratio) {
@media (-webkit-min-device-pixel-ratio: $ratio), (min-resolution: #{round($ratio*96)}dpi) {
@content;
}
}
body {
position:relative;
height:100vh;
background:$brand-primary;
width:100%;
}
.container {
top:50%;
transform:translateY(-50%);
position:relative;
}
.alpha {
text-align:center;
color:$brand-secondary;
&:not(.solution1) {
&:after {
content:'';
@extend %diamond;
margin-left:11px;
}
}
&.solution1 {
.diamond {
@extend %diamond;
margin-left:11px;
}
}
}
%diamond {
width:13px;
height:14px;
display:inline-block;
transform:rotate(-45deg);
border:1px solid $brand-secondary;
vertical-align:middle;
@include hidpi(2) {
height:13px;
}
}
JS:
jQuery(document).ready(function($) {
var content = $('.solution1').html();
var lastChar = content.slice(-1);
$('.solution1').html(content.slice(0, -1)+'<span style="white-space:nowrap">'+lastChar+'<span class="diamond"></span></span>');
});
您可以嘗試使用white-space
來防止h1
換行,並將文本包裝在span
元素中,以恢復正常行為。
h1 {
white-space: nowrap;
}
h1 > span {
white-space: normal;
}
此外,Chrome還需要
h1 > span::after {
content: '';
white-space: nowrap;
}
body { position: relative; height: 100vh; background: lightblue; width: 100%; } .container { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; } .alpha { text-align: center; color: #2e7e99; } .alpha:after { content: ''; width: 13px; height: 14px; display: inline-block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border: 1px solid #2e7e99; vertical-align: middle; margin-left: 11px; } h1 { white-space: nowrap; } h1 > span { white-space: normal; } h1 > span::after { content: ''; white-space: nowrap; }
<div class="container"> <div class="row"> <div class="col-xs-12"> <h1 class="alpha"> <span>A heading with a decorative pseudo-element that breaks by itself</span> </h1> </div> </div> </div>
您也可以使用UTF8中的標准菱形: ◇
。
如果讓:after
作為display: inline
,則不會中斷,因為您沒有在最后一個單詞和它之間添加任何空格。
.alpha.solution3:after { display: inline; content: "◇"; font-weight: normal; font-size: 1.2em; }
<h1 class="alpha solution3">A solution that does not require Javascript neither a SPAN</h1>
如果這個字符對您來說太粗了,您可以制作自己的字體,使用font-face
並搭配使用。
http://codepen.io/anon/pen/BoxjzO
這也適用於不支持transform
瀏覽器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.