[inline] <form> <input id="anser1" type="number" min="0" max="9999999" value="0"> <br> <input id="anser2" type="number" min="0" max="9999999" value="0"> <br> <input type="button" value="結果を表示する" onclick="keisan2();"> <br> <div id="anserall" style="white-space:pre;"></div> </form> [script type="text/javascript"] // ◆◆◆ファンクション名◆◆◆ function keisan2() { // ◆◆◆入力された(anser)の定義◆◆◆ var anser1 = (document.querySelector('#anser1').value); var anser2 = (document.querySelector('#anser2').value); // ◆◆◆関数設定◆◆◆ var word1 = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん'; var word2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // ◆◆◆テーブル設定◆◆◆ var table1 =`<table style="width:300px;"><tbody><tr><td>`; var table2 =`</td></tr><tr><th>`; var table3 =`</th></tr></tbody></table>`; // ◆◆◆結果の表示◆◆◆ document.querySelector('#anserall').innerHTML = table1+word1+anser1+table2+word2+anser2+table3; } [/script] [/inline] ```### 前提・実現したいこと 次のようなプログラムを使って、入力結果を表示しているのですが、文字数が多いとブラウザによってはtableから折り返されることもなく、はみ出して表示されてしまいます。 (iPhoneでみると折り返されて表示されますが、アンドロイドで見るとはみ出ています) 色々調べてみましたが、cssで「overflow-wrap:break-word」や「word-break:break-all」、「 word-wrap: break-word;」などを指定しても改善できず、行き詰ってます。。。 どのブラウザからでもtable内で折り返して表示されるように何とかしたいのですが、改善方法をご教授いただけないでしょうか。 ちなみにtd にCSSの「overflow: auto;」を指定すると、折り返しはされないものの、スクロールで表示されるようになりました。 しかし、その場合だとブラウザによっては、td内の文字が全く表示されない場合があるため、やはりうまくいかないようです。。。