如何在不同瀏覽器中可靠地將長單字換行到 Div 中？-css教學-PHP中文網

如何在不同瀏覽器中可靠地將長單字換行到 Div 中？

Susan Sarandon

發布： 2024-12-20 12:49:22

原創

286 人瀏覽過

How Can I Reliably Wrap Long Words in a Div Across Different Browsers?

在Div 中換行長單字：跨瀏覽器指南

雖然Internet Explorer 提供自動換行樣式，但個人可能會尋求跨平台的單字解決方案- 將長字串包裹在div 中。本文探討了實現此目標的 CSS 和 JavaScript 方法。

CSS 方法：

CSS 提供了多個可以啟用自動換行的屬性。以下程式碼片段應該適用於大多數瀏覽器：

.wordwrap {
  white-space: pre-wrap;      /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap;     /* Opera <7 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* IE */
}

登入後複製

透過將 wordwrap 類別應用於包含文字的 div，瀏覽器將自動換行長單字以適應可用寬度。

JavaScript 方法:

如果CSS不可行，JavaScript也可以用來模擬自動換行。一種方法是將每個字符單獨包裝在一個 span 元素中：

function wrapWords(div) {
  var text = div.innerHTML;
  var wrappedText = "";
  for (var i = 0; i < text.length; i++) {
    wrappedText += "<span>" + text[i] + "</span>";
  }
  div.innerHTML = wrappedText;
}

登入後複製

此函數迭代字符，為每個字符創建一個 span，然後將包裝後的文本插入回 div 中。

以上是如何在不同瀏覽器中可靠地將長單字換行到 Div 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！