如何在div元素中實現跨瀏覽器自動換行？

Div 中擴展字串的跨瀏覽器自動換行

雖然Internet Explorer 提供了自己的自動換行樣式，但找到一種跨瀏覽器的自動換行樣式在div 中換行文字的瀏覽器解決方案是常見問題。本文探討了 CSS 和 JavaScript 方法來應對這項挑戰。

CSS 方法

CSS 提供了幾種在 div 中自動換行長字串的選項：

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.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 */
}

Java方法

雖然不如CSS、JavaScript也可以實現自動換行。一種方法是使用自動換行功能：

function wordwrap(str, width) {
  if (!width) { width = 80; }

  var re = new RegExp(".{" + width + "}(\s|$)|\S+\S{0," + (width - 1) + "}", "g");
  return str.match(re).join("\n");
}

應用於Div

要將任一方法應用於div，請在CSS 中使用適當的程式碼或JavaScript 檔案並將相關的類別或ID 指派給div 元素。

對於 CSS方法：

<div class="wordwrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit mi nibh, id sagittis tellus maximus eget. Mauris ut pharetra est, eu mattis quam.
</div>

對於 JavaScript 方法：

以上是如何在div元素中實現跨瀏覽器自動換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！