それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由

inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で

[neet_modi_ki]

改行調整、本質的に望ましくないのは分かるが、書かれているように「ここぞ」という場合に必要なのもそうなので…（こういう調整など一切不要、ってのも日本語タイポグラフィというものを軽視している）

[ultimatebreak]

改行調整指示があるといつもモヤモヤするけど諦めた。どうやったって行儀悪いコードになるからもう楽なbrかwbrでいいやってなった

[lli]

欧米言語でもこういう機能の需要はありそうなもんなのに実装されてないんだな

[diveintounlimit]

こういうのを頑張ってコテコテになったHTMLをたまに見かけるけど、コストがかかりすぎていて価値が見合っているのか怪しい感じがする。

[bocuno]

そもそも改行調整してくれるな／追記、タイポグラフィ言ってる人いるけど。それはHTMLで表現すべきことではない。画像でやってくれ。

[nekoline]

LPとかだと全部の単位をvwにしてしまって、改行調整する必要無くすとか。画面幅に応じて文字サイズも可変するので改行する/しないの判断分かれる余白が生まれない

[sisicom]

ここで改行して欲しくない、ってあるよね。その時の対応策

[efcl]

`<wbr>`での改行位置

[mohri]

ポエム改行のための有益なテクニックやー

[inazuma2073]

wbrつけるようにしてるけどぶっちゃけ半々くらいしか効いてない

[manaten]

実装・入稿コストと期待効果のバランスじゃないかなあ。個人的なバランス感覚だと、LPページなどの大見出し以外では必要ないテクニックに感じる。そもそもロゴに近い文字列なら、svgにしてmax-with:100%にするとかもアリ

[KoshianX]

ここまでこだわらないといけない状況は作り出したくないけどまあやらざるを得ないときはあるのかもねえ。span を入れ子にして inline-block にすることで改行位置を調整ってめんどいなあ……

[yarumato]

“日本語は単語の区切りがないので、不自然な位置で改行される。それを防ぐため、改行すべき位置を指定したい。代表的な改行調整の手法”

[nakag0711]

自動の折り返し禁止しちゃってもっと狭くなったらどうするつもりなの

[azzr]

webじゃない文脈ではzero-width spaceとかzero-width non-joinerとかで調節したことはあるな。優先度とかはないけど、手動の微調整ではあんまり必要ではなかった。

[stabucky]

日本語も文節ごとにスペースを入れればいいんじゃない？ どうせ句読点入れないんだから。

[atsushieno]

google/sentencepieceみたいなやつwasmで動かんのかな

[hase0510]

「word-break: auto-phrase」とかがいい感じにやってくれたりはしないの？ BudouXとかさ。人間がいちいち指示するのめんどいじゃん。

[eachtime]

いずれにせよ面倒くさい

[surume000]

wbr知らんかったおじさんです

[eartht]

wbr 初めて知った…。ずっとbr+display:none で頑張っとった…

[kathew]

見栄え調整のためだけのspanをHTMLに含めたくない派としては使いたくない手法だけど、要件によっては、せざるを得ないこともあるかなあ

[kijtra]

CMSで更新しないハードコーディングのテキストなら別にどうでもいいよね。なんならSVG内文字でもいい。

[shoh8]

過剰に使いたくないけど、調整しないといけないところだとしょうがなくなる。いいレイアウトのサイトは開発者ツールで見ちゃうなあ

[xlc]

inline-block は要素のサイズを指定するような時に使うのが正しいと思っていたが。単語内で折り返さないためなら white-space:nowrap とかではないのかしら。/ ↑多分勘違いしてる。全体に指定はしないよ。

[shingo-sasaki-0529]

そもそもinline-block 化することで単語途中での改行を回避するテクニックを初めて知った。