行は10行を指定していますが、4行程度しか表示されません。
ためしに<pre>をいれてみたところ<p>タグはきえたものの、<pre>自身が表示されていて間抜けな感じです。
こんにちは
現在textareaで、表示していますが、なぜか本文改行位置にPタグが表示されてしまいます。
フォーム(コンタクトフォームの編集画面のフォーム)内であれば、textarea タグ内に p タグは挿入されないと思います。どちらに記述していますか?
そもそもtextareaでよいのかわかりません。
表示だけであれば、overflow プロパティで scroll を使用するのもいいかもしれません。
<div style="width:100%; height:100px; overflow-y: scroll; border: 1px solid #ddd;">
<p>プライバシーポリシーの全文1</p>
<p>プライバシーポリシーの全文2</p>
</div>
行は10行を指定していますが、4行程度しか表示されません。
rows 要素より、スタイルの height(height:100px;)が優先されるからです。
ご検討ありがとうございます、
希望に近い形になりますが、以下の現象がおこります。
・天地は4行程度にしかなりません
・空行がとんでしまってベタテキストになります。
なにが原因なのでしょう。contact-from 7の入力エリアはHTMLがつかえるのですよね
天地は4行程度にしかなりません
スタイルの height の値(100px)を調整してください。
空行がとんでしまってベタテキストになります。
HTML で改行は、ブラウザ上では反映されません。br や p タグをお使いください。
https://saruwakakun.com/html-css/reference/br
ご返信ありがとうございます。
Brの改行を止める。
段落末はp brとする
といった調整でうまくいきました。
天地は200pxで希望のサイズになりました。
あとはスクロールバーが常時表示されればよいのですが、ブラウザー依存なのかな….
あとはスクロールバーが常時表示されればよいのですが、ブラウザー依存なのかな….
Chrome(スマホ)および Safari の場合は、下記のようなスタイルで常時表示されるようになります。
対象のタグに、scroll-box クラスを追加
<div class="scroll-box" width:100%; height:100px; overflow-y: scroll; border: 1px solid #ddd;">
<p>プライバシーポリシーの全文1</p>
<p>プライバシーポリシーの全文2</p>
</div>
下記スタイルをテーマの style.css またはカスタマイズの [追加 CSS] に追加
/* スクロールバーの幅 */
.scroll-box::-webkit-scrollbar { width: 20px; }
/* スクロールバー背景色 */
.scroll-box::-webkit-scrollbar-track { background: #f1f1f1; }
/* スクロールバーのつまみの色 */
.scroll-box::-webkit-scrollbar-thumb { border-radius: 6px; background: #c1c1c1; }