[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

179users がブックマーク コメント 27

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

179 users zenn.dev/kagan

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページ

記事へのコメント27

  • 注目コメント
  • 新着コメント
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
日本語も文節ごとにスペースを入れればいいんじゃない? どうせ句読点入れないんだから。

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

2024年03月24日 リンク

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

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

その他
eachtime
いずれにせよ面倒くさい

その他
surume000
wbr知らんかったおじさんです

その他
eartht
wbr 初めて知った...。ずっとbr+display:none で頑張っとった...

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

2024年03月24日 リンク

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

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

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

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

2024年03月24日 リンク

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

2024年03月24日 リンク

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

2024年03月24日 リンク

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

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

2024年03月23日 リンク

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

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「それでも私が<wbr>...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • sisicom2024年11月22日 sisicom
  • techtech05212024年06月28日 techtech0521
  • akira_maru2024年04月08日 akira_maru
  • efcl2024年04月08日 efcl
  • mohri2024年04月07日 mohri
  • m0t0m0t02024年04月02日 m0t0m0t0
  • masakuma08122024年04月01日 masakuma0812
  • inazuma20732024年04月01日 inazuma2073
  • nakayoshiyama2024年03月28日 nakayoshiyama
  • innobirdnet2024年03月26日 innobirdnet
  • manaten2024年03月26日 manaten
  • sig2024年03月26日 sig
  • ku_marin2024年03月26日 ku_marin
  • daizu61102024年03月25日 daizu6110
  • ka0022024年03月25日 ka002
  • s99e2092024年03月25日 s99e209
  • KoshianX2024年03月25日 KoshianX
  • udtech2024年03月25日 udtech
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /