inputのbuttonで改行っぽい見た目に!


ただの改行の記事となります。

メモとして書き残します。


<input type="button" value="Two&#13;&#10;Line”/>

「改行」はできませんでしたが、
改行っぽい見た目にはなったので、ご紹介いたします。

html

<input type="button" value="One&#13;&#10;Two”/>
CSS

input {
    white-space: pre-line;
    word-break: break-all;
    width: 120px;
    padding: 15px;
    -webkit-appearance: none;

    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;

要素の幅をはみ出したら改行されました!
safariだともう少しwidth広げても改行していたのですが…くむむ。


Demo

いいなと思ったら応援しよう!

とあるクリエイター
よろしければ、サポートお願いします。 自分のモチベーションアップのためと、今後のためにインプットに使わせて頂き、またアウトプットできればと思っております。