這個問題在這里已經有了答案： 如何在 DIV 中的長單詞中強制換行？ (16 個回答) 9 小時前關閉。
我想做一個簡單的類似計算器的應用程式。我創建了一個 ID 為 display 的 div 和三個輸入數字 1、2、3 的按鈕。數字并排顯示。然而，當它們碰到容器的邊緣時，它們只是不包裹。如何使輸入的數字換行到下一行？我試過： display: flex; flex-wrap: 包裹; 但它沒有用。我猜溢位：隱藏；也不起作用，因為它只隱藏了內容。
<div id="display"></div>
<div class="keypad">
<button id="btn1" onclick="press1()">1</button>
<button id="btn2" onclick="press2()">2</button>
<button id="btn1" onclick="press3()">3</button>
</div>
#display {
width: 300px;
height: 100px;
background-color: gold;
border: 1px solid black;
}
.keypad {
width: 300px;
height: 100px;
margin: 0 auto;
border: 1px solid orangered;
}
button {
width: 97px;
height: 97px;
border: 0;
outline: 0;
}
let numberEntered = "";
const display = document.querySelector("#display");
console.log(display);
function press1() {
numberEntered = 1;
display.textContent = `${numberEntered}`;
}
function press2() {
numberEntered = 2;
display.textContent = `${numberEntered}`;
}
function press3() {
numberEntered = 3;
display.textContent = `${numberEntered}`;
}
uj5u.com熱心網友回復：
嘗試將此行添加到 #display (CSS)：
word-wrap: break-word;
我希望這就是你的意思。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334100.html
標籤：javascript css