[英]Line break caused by long words visually breaks the centering of paragraphs with left-aligned text
我正在創建一個帶有左對齊文本的居中段落。 在大多數情況下,一切都運行良好。 但是,當行尾有一個非常長的單詞迫使文本換行時,它會在第一行的末尾留下很多空白。 這使得整個段落在視覺上看起來“不居中” - 更傾向於左側,如代碼示例中所示(想象灰色背景不存在)。
我嘗試過使用inline-block
但到目前為止沒有成功。 因為我相信這可能是一個非常好的謎語,所以我決定在這里分享它。 注意:也不清楚段落中的文本是什么,所以我們需要考慮一個通用的解決方案(沒有硬編碼的邊距等)。 單詞需要保持原樣, break-word
不適合我的場景。
.content { margin: auto; width: 400px; } p { background-color: #eee; }
<div class="content"> <p> At vero eos et accusamus et iusto odio digducimusverylongword qui </p> </div>
我嘗試進行此討論: 居中對齊左對齊的短文本塊。 但是當換行符是自動的而不是顯式的<br>
元素時,它似乎無效。
根據您的 i18n 最終目標,您可以定義word-break
屬性:
.content { margin: auto; width: 400px; } p { background-color: #eee; word-break: break-all; }
<div class="content"> <p> At vero eos et accusamus et iusto odio digducimusverylongword qui </p> </div>
盡管我意識到這可能不是您要尋找的東西(並且@BenM使用word-break: break-all
的答案可能更合適)...另一種選擇是簡單地使用text-align:justify
...
.content { margin: auto; width: 400px; } p { background-color: #eee; text-align:justify; }
<div class="content"> <p> At vero eos et accusamus et iusto odio digducimusverylongword qui </p> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.