如何為從javascript陣列const中隨機抽取的文本獲取換行符

我正在為語言教育創建一個簡單的網頁工具，它從 javascript 陣列 const 中隨機選擇一個問題，但較長的問題被切斷，尤其是對于移動設備。我怎樣才能為這些較長的文本問題換行？我嘗試在陣列中添加中斷，并且嘗試為輸入和 div 添加 css 換行符，但沒有任何效果。

    <style>
    .button {
      background-color: #094997;
      border-radius: 12px;
      border: none;
      color: white;
      padding: 12px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      width: 200px;
    }
    input
    {
        font-size:22px;
        padding: 50px 50px;
        text-align: center;
        width: 200px;
        height: 250px;
    }
    .questionsdiv {
        text-align: center; 
    }

    </style>


    <div class="questionsdiv">
    <input type="text" "randomquestion"="" id="randomquestion">
    <br><br>
      <button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
    </div>


    <script>

    const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];

    function findquestion() {
      let randomIndex = Math.floor(Math.random() * question.length);
      document.getElementById("randomquestion").setAttribute("value", question[randomIndex]);
    }

    </script>

uj5u.com熱心網友回復：

在這段代碼中，input標簽用于顯示文本，inputhtml中的標簽不支持多行文本。您必須替換input為textarea And useinnerHTML而不是setAttribute

  <style>
    .button {
      background-color: #094997;
      border-radius: 12px;
      border: none;
      color: white;
      padding: 12px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      width: 200px;
    }
    textarea
    {
        font-family:arial;
        font-size:22px;
        padding: 50px 50px;
        text-align: center;
        width: 200px;
        height: 250px;
    }
    .questionsdiv {
        text-align: center; 
    }

    </style>


    <div class="questionsdiv">
    <textarea type="text" randomquestion="" id="randomquestion"></textarea>
    <br><br>
      <button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
    </div>


    <script>

    const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];

    function findquestion() {
      let randomIndex = Math.floor(Math.random() * question.length);
      document.getElementById("randomquestion").innerHTML  = question[randomIndex];
    }

    </script>

注意： textarea 默認使用monospace font-family property你可以用你想要的任何字體替換它

uj5u.com熱心網友回復：

Input 是用于單行用戶輸入的元素。對于換行符 textarea 更合適。在這種情況下，由于沒有用戶輸入，您可以只使用 div 元素并設定 innerText。

...
  <div type="text" "randomquestion"="" id="randomquestion"></div>
...

...
  document.getElementById("randomquestion").innerText = question[randomIndex];
...

.button {
  background-color: #094997;
  border-radius: 12px;
  border: none;
  color: white;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 24px;
}
.questionsdiv {
  margin: auto;
  width: 200px;
}

在這里演示：https ://jsfiddle.net/qkpmr81c/1/

標籤：javascripthtmlcss随机的换行符

上一篇：向API回應添加新資料

下一篇：將div在flexbox內向右移動，同時保持空間寬度