首頁 > web前端 > css教學 > 如何使用 JavaScript 將 DIV 動態收縮為換行文字?

如何使用 JavaScript 將 DIV 動態收縮為換行文字?

Mary-Kate Olsen
發布: 2024-10-29 10:03:29
原創
962 人瀏覽過

How to Dynamically Shrink a DIV to Wrapped Text Using JavaScript?

使用 JavaScript 將 DIV 動態收縮為換行文字

收縮 DIV 以容納文字通常很簡單。但是,當文字因最大寬度限製而換行為多行時,DIV 無法相應縮小。這會在 DIV 的右側創造難看的邊距。

JavaScript 解決方案

由於純 CSS 解決方案不可行,我們轉向 JavaScript動態方法。以下程式碼片段說明如何操作:

<code class="javascript">const range = document.createRange();
const p = document.getElementById('good');
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;</code>
登入後複製

此程式碼片段執行以下操作:

  1. 建立封裝文字的範圍。
  2. 取得 將 DIV 的寬度設定為
  3. clientRect
  4. 的寬度。
  5. 範例用法

<code class="html"><p id="bad">This box has a max width but also_too_much_padding.</p>
<p id="good">This box has a max width and the_right_amount_of_padding.</p></code>
登入後複製
此範例建立兩個具有不同填充的方塊。第一個框演示了原始問題,而第二個框使用 JavaScript 解決方案動態縮小到文字的寬度。
<code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>
登入後複製

以上是如何使用 JavaScript 將 DIV 動態收縮為換行文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板