什麼是在網頁上「包裝文本」的最佳方式

Question

我有一個HTML頁面，其中列出了人員及其名稱的圖片。如果名稱長於20個字符，我希望它顯示在2行而不是1行上，以避免在其下面的人留下大量空的水平空間。

確保執行此操作的最簡單方法是什麼？要說清楚，我不想打破名義上的文字，而只是分解兩行文字。

Answer 1

您可以嘗試設置容納名稱的容器的寬度較小或者添加一些填充。例如：

HTML

<div class="name">This is my name</div> 

CSS

.name { width: 50px; /* or whatever value works for you */ } 

Answer 2

你寧願需要決定什麼是名字可以採取的最大寬度。然後，

.boxed-name { width: ?? px;text-align: ??; } 

一個字符計數解決的主要問題是，它不考慮字體系列無論是字體大小。這可能導致嚴重的差異。另外，如果當前字體不固定，mmmmmmmmmmmmmmmmmmmm可能會比iiiiiiiiiiiiiiiiiiii更長。