Skip to content

短めです。

「テキストが変なところで折り返される。」

webサイトを制作するときに、デザイナーやお取引先様によく言われます。
今どきでFigmaとかXDとかでデザインが上がってくればこの問題は事前解決済みだったりするけれど、illustratorとかで上がってくると、デザイナーさんはテキストも見栄え良くつくっちゃう。そしてコード生成するときにお話をいただく。

※飽くまで静的なページのみ。

解決。

<p>
    <span class="inline-block">私の</span>
    <span class="inline-block">名前は</span>
    <span class="inline-block">mast1ff</span>
    <span class="inline-block">です。</span>
</p>
.inline-block {
    display: inline-block;
}

"inline-block"なんだからあたりまえですけど・・・。

※日本語とか中国語とかの解決のみを優先した方法なので、決してイケてはいません。

以上です。