お問い合わせはコチラから

CSSで英語の文章の単語間スペースが空きすぎと思ったときは?

海外のWordpressテンプレート使っていて英語の文章を書いた時に困ったことがありました。ある行だけ単語間のスペースが異常に広くなる時があって、ちょっと間抜けな感じでした。

原因は長めの単語があったときに、単語の途中で改行しないのでかなり手前で改行されて、行いっぱいに単語が配置されるからです。

この状況は、MicrosoftのWordではよくある光景なのですが、CSSではどのように調整するのかあまり意識していませんでした。

答えから言います。

 

text-align: justify;

となっているはずなので、

text-align: left;

とすれば単語の間隔は自動調整されなくなります。

text-align: justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut velit ac metus condimentum eleifend sit amet sit amet neque. Nam vestibulum mattis mi et finibus. Nunc malesuada leo et tempor cursus. Sed semper libero et leo vulputate, vel mollis massa vulputate. Donec efficitur sapien eget dolor molestie ornare. Pellentesque nec diam ac mauris dictum ullamcorper nec in diam. Sed in velit sed eros ultricies sagittis quis vitae diam. Sed ut bibendum diam. In fermentum tincidunt tortor, id ornare justo consectetur in. Aliquam pretium at nisi a posuere. Donec mauris magna, rhoncus quis scelerisque quis, eleifend sit amet ex. Duis vehicula odio vel vestibulum placerat. Nullam vitae justo porta, fringilla ipsum eu, luctus leo.

text-align: left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut velit ac metus condimentum eleifend sit amet sit amet neque. Nam vestibulum mattis mi et finibus. Nunc malesuada leo et tempor cursus. Sed semper libero et leo vulputate, vel mollis massa vulputate. Donec efficitur sapien eget dolor molestie ornare. Pellentesque nec diam ac mauris dictum ullamcorper nec in diam. Sed in velit sed eros ultricies sagittis quis vitae diam. Sed ut bibendum diam. In fermentum tincidunt tortor, id ornare justo consectetur in. Aliquam pretium at nisi a posuere. Donec mauris magna, rhoncus quis scelerisque quis, eleifend sit amet ex. Duis vehicula odio vel vestibulum placerat. Nullam vitae justo porta, fringilla ipsum eu, luctus leo.

タイトルとURLをコピーしました