wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

リンク文字列のボックス内の改行をCSSで設定するには

現在、運営サイト全体のメンテナンス作業に取り掛かっています。スマホ対応のCGI掲示板にするには、フォーラム形式じゃなくてトピック形式でよくない?って思って、KENT-WEBのWeb Forumから WEB PATIO に変更しました。

そういえば、前に掲示板設置したっていうエントリー書きましたっけ?

しかし、提供されているCSSはある意味不完全であり、いろいろと手直しをしなければいけないわけです。

たとえば、スマホ画面にしたときのリンク付きのURLの文字が折り返されずに画面からはみ出してしまう状況。

最後にこのはてなブログの記事リンクを掲載してますが、

既定では右側にはみだしちゃったんですよね。

これを防ぐには、CSSでどうすればいいか、とググってみました。

developer.mozilla.org

word-break プロパティを使えばいいということです。で、その値は break-all でっか?

a{
	word-break: break-all;
}

しかしながら、Expression Webのスタイルの変更ダイアログでは word-break がないんですよね。

f:id:wanichan:20200430123229p:plain

まだCSS3には正式に追加されていないようですわ。IEが独自に採用とな?

www.htmq.com

f:id:wanichan:20200430124548p:plain

IEだけじゃなくて、ChromeでもEdgeでも折り返しの設定が可能でした。

とりあえず、word-break: break-all; をCSSファイルに追加しとけば間違いないですね!