設置寬度<div>是基於文本內容的兩個值之一

Question

有沒有辦法使用條件運算符來設置<div>寬度？

例如，如果有 60 個字符或更少，則寬度應為 500 像素，否則為 700 像素。

這在某種程度上可以正常工作：

 .flex-container { display: flex; flex-wrap: wrap; } .flex-container > div { display:block; min-width: 600px; margin: 2px; text-align: left; }

 <div class="flex-container"> <div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </div> <div>(B) Lorem ipsum dolor sit amet,</div> <div>(C) Lorem ipsum dolor sit amet </div> <div>(D) Lorem ipsum dolor sit amet </div> </div>

輸出：

但是，當我增加第一個孩子<div>的字符數時，我得到了這個：

我希望所有容器元素在元素超過特定字符限制（例如 60 個字符）后向下移動。

編輯：

我想要的是這樣的：

（圖片）

Answer 1

使用 CSS Grid 比使用 flexbox 布局更容易做到這一點； 在這里，我們利用minmax()函數來確定列寬（請記住，我們明確地為整個列設置樣式，而不僅僅是內容的特定“單元格”）：

grid-template-columns: repeat(2, minmax(min-content, 700px));

這里我們使用repeat()函數創建兩列，每列分配的最小寬度為500px或最大寬度為 700px。

這給出了以下輸出：

 .flex-container { display: grid; grid-template-columns: repeat(2, minmax(500px, 700px)); grid-template-rows: repeat(2, 1fr); } .flex-container>div { white-space: nowrap; overflow: hidden; }

 <div class="flex-container"> <div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </div> <div>(B) Lorem ipsum dolor sit amet,</div> <div>(C) Lorem ipsum dolor sit amet </div> <div>(D) Lorem ipsum dolor sit amet </div> </div>

參考：

• minmax() 。
• repeat() 。
• “ 網格布局的基本概念。”

Answer 2

你可以用 jQuery 做到這一點。 運行一個循環並檢查所有元素，如果其中一個元素超過 60 個字符，則對所有元素應用寬度。

 var elem = $('.flex-container > div'); for (var i = 0; i < elem.length; i++) { if (elem.eq(i).text().length > 60) { elem.css('width', '600px'); break; } }

 .flex-container { display: flex; flex-wrap: wrap; } .flex-container>div { display: block; min-width: 300px; margin: 2px; text-align: left; border: 1px solid; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flex-container"> <div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </div> <div>(B) Lorem ipsum dolor sit amet,</div> <div>(C) Lorem ipsum dolor sit amet </div> <div>(D) Lorem ips </div> </div>

Answer 3

您可以通過 JavaScript 使用字符串長度屬性和條件來解決此問題。

1) 在 JavaScript 中創建一個變量來訪問你創建的 div 使用： document.getElementsByTagName("div").innerHTML;

2) 使用if 。 在條件中使用length屬性和壓縮器來查看長度是否大於一定數量的字符。

3) 在語句中添加document.getElementsByTagName("div").style.width = x; 並通過更改x將寬度修改為您想要的數字。

使用條件運算符，您已經根據文本的大小設置了 div 的大小。