Word包裝不同的Firefox，IE瀏覽器，鉻，移動瀏覽器

Question

我有一個固定的寬度和高度的背景圖像的文字。我希望文本是固定數量的行（3）。文本在不同的瀏覽器中換行方式不同，有時會插入額外的行，使文本超出背景圖像的邊界。這意味着我必須從我的文本中添加/刪除單詞，並不斷檢查每個瀏覽器中的渲染，以確定它的行數相同。

我猜測要麼瀏覽器四捨五入的寬度/邊距/填充，使容器的寬度不同，或在每個瀏覽器（或多或少的寬度）略有不同的文本呈現。

對此有何建議？我希望容器中的文本長度不超過3行，所以我同樣可以修復容器的高度。

Answer 1

推薦練習不是這樣做的。嘗試重新設計，使背景圖像不需要是固定的高度，文本不需要限制在三條線上。如果這是您的老闆/客戶強加給您的某種要求，那麼您需要與他們交談並解釋，這不是HTML/CSS中可以或不應該做的事情。

請記住，不僅每個瀏覽器中的字符寬度會有所不同，導致不同的包裝，但瀏覽器將在不同高度顯示文本行，因此它可能是您的元素可以不包含三行。

如果您沒有其他選擇，請考慮在固定尺寸元素上使用overflow: hidden，但這很可能會導致切斷字母和/或單詞。

---

重新編輯點評：

我不認爲可用空間將瀏覽器之間的變動內容。如果您使用的是相對單位（em,%），那麼可能會有最大一個像素的舍入差異。但是，您使用的是像素，在所有當前瀏覽器中（在標準模式下）應該是相同的。

無論如何，我不是說你應該限制你想要顯示的文本的數量，只是給文本一些空間來「呼吸」，並不給元素一個固定的高度像素。相反：

• 設置一個line-height（例如1.25）和min-height三倍量（這裏3.75em）。
• 使用您的最佳估計值將要放入其中的文本限制爲三行。
• 添加一些縮短文本的JavaScript，以防它發生三行以上的情況。
• 調整您的佈局（包括該元素的靈活背景），因此它可以在兩種不同的瀏覽器（並且更重要的是用戶的首選）字體大小和可以存活一個額外的文本行在很少的情況下，您錯誤地估計了文本的長度並且JavaScript不可用。

Answer 2

確保您使用的CSS不錯，因爲大多數瀏覽器對各種標籤都有不同的默認值。假設你的重置是好的，你可以使用瀏覽器特定的CSS來解決渲染的差異。