長詞引起的換行在視覺上破壞了左對齊文本的段落居中

Question

我正在創建一個帶有左對齊文本的居中段落。 在大多數情況下，一切都運行良好。 但是，當行尾有一個非常長的單詞迫使文本換行時，它會在第一行的末尾留下很多空白。 這使得整個段落在視覺上看起來“不居中” - 更傾向於左側，如代碼示例中所示（想象灰色背景不存在）。

我嘗試過使用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>元素時，它似乎無效。

Answer 1

根據您的 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>

Answer 2

盡管我意識到這可能不是您要尋找的東西（並且@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>