如何僅在遇到換行符時左對齊居中文本？

如何處理我的文本變爲左對齊如果命中它的包含空間的結束並且必須切換到下一行？ CSS中是否有固有的東西可以檢測到它，還是必須是JavaScript解決方案？如何僅在遇到換行符時左對齊居中文本？

這裏的小提琴，所以你可以看到它的行爲方式：https://jsfiddle.net/fj4ddmey/2/

.text.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 350px; 
 
    border: 1px solid black; 
 
} 
 
.text.container.two { 
 
    text-align: left; 
 
}

<div class="text container"> 
 
    <p>This is how short sentences should look</p> 
 
</div> 
 
<div class="text container"> 
 
    <p>This text should be left aligned because it hits a line break</p> 
 
</div> 
 
<div class="text container two"> 
 
    <p>This is how it should look, but it needs to be a fluid solution</p> 
 
</div>

來源

2016-01-28 Yeats

我想你在找什麼會檢查每個'p'確定的高度DOM中的元素大於行高。它可能需要成爲一個JavaScript解決方案，除非有比以前更強大的媒體查詢。 – krillgar

使用flexbox像

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <p>This is how it should look, but it needs to be a fluid solution</p> 
 
</div>

這裏是JSFiddle demo

來源

2016-01-28 17:09:00

我可以在flexbox上使用以進行說明：http://caniuse.com/#feat=flexbox –

您可以設置<p>爲內聯塊，使text-align:center容器上會先居中<p>標籤，而不是文字。內聯塊具有縮小到適合的特徵，意味着寬度取決於內容，並且永遠不會超出容器，text-align:left，內部文本在換行時將左對齊。

.container { 
 
    width: 350px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    outline: 1px solid black; 
 
} 
 
.container p { 
 
    display: inline-block; 
 
    text-align: left; 
 
    outline: 1px dotted red; 
 
}

<div class="container"> 
 
    <p>This is how short sentences should look</p> 
 
</div> 
 
<div class="container"> 
 
    <p>This text should be left aligned because it hits a line break</p> 
 
</div>

來源

2016-01-28 17:09:15 Stickers

我不知道爲什麼這個和flexbox解決方案都不適合我。 – Yeats

你可以在jsfiddle上分享一個演示嗎？所以我可以看看。 – Stickers

您可以使用jQuery來確定元素的高度，如果大於一行，添加一個類文本適當理由。

像這樣的東西應該工作：

function countLines(e) { 
    var elementHeight = e.innerHeight(); 
    var lineHeight = parseInt(e.css('line-height')); 
    var lines = elementHeight/lineHeight; 
    return(lines > 1); 
} 

$('p').each(function() { 
    if(countLines($(this))) { 
     $(this).addClass('two'); //class to left justify 
    } 
})

你可以看到它在這裏工作：https://jsfiddle.net/igor_9000/fj4ddmey/1/

來源

2016-01-28 17:17:24

如何僅在遇到換行符時左對齊居中文本？

回答

相關問題