- このトピックには6件の返信、2人の参加者があり、最後に
により5年、 6ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】（テーマ: v5.6.2 Blocks: 3.5.3）
【お使いのブラウザ】Safari
【当該サイトのURL】トピック立てている時点ではローカル令和最初のトピックがまさか不具合報告になるなんて…要望でありたかった！（落ち着け、私
本題…
目次（ブロック）の第４階層（h4)の表示幅が、フルになっておらず、途中で改行されてしまうようです。
また、「フッターの４カラム時に文字が微妙に重なってしまう問題」同様に、見出しに長文を入れると、目次枠からは、はみ出て出力されてしまっています（汗）いいねをした人: 居ませんの、「WordPressのデバッグ設定を有効にする」の項目だと、
「WordPressのデバッグ設定を有効にす
る」
と折り返していると思います。（一応ローカルじゃない場合はこれのみ再現できてると思います）その他に、ローカル環境では「Gutenbergのブロック開発環境〜〜〜」と入れると
「…ブロック開
発環境…」と折り返したりされます。
但し、なる場合とならない場合があるので、実際のURLでは再現出来なかったようで…
なかなか再現パターンが解りません。aタグのスタイルで
width: 100%;
display: block;
とすれば横幅いっぱいになるので直るみたいです。いいねをした人: 居ませんあー理解しました、Safari でみたときになりますね。Chrome だとならないので気づきませんでした。 Safari の
inline-flexのバグなんですかねー、どうなんだろう。display: blockにすると左端に表示されるナンバリングがずれちゃうんですよね。ちょっと考えます。いいねをした人: 居ませんどうも Safari の
flex-shrink（かflex-basisかflex-grow）のバグっぽい気がします。同じ文字列でも再現しなかったりしますし。flexをやめてabsoluteにする、くらいしか解決法が思いつかないのですが、そうしてしまうと目次内の数字が2桁以上になったときの余白問題とかがでてくるので、ちょっとどうしようかなというところです。他の解決法が思いつくまで保留します、すみません><いいねをした人: 居ませんどうも Safari の flex-shrink （か flex-basis か flex-grow）のバグっぽい気がします。同じ文字列でも再現しなかったり
うーん、ブラウザ側のバグだと正攻法での直しようがなさそうな気がしますね。
同じ文字列でも再現出来ない時もあるので、なった時はスペース入れたりしてとりあえずは1行になるように調整するようにしましょうか。width:100%;
display: inline-block;
text-indent: …としても、beforeの数字幅が大きくなってしまうので、ちょっと悩んでますが…
beforeの数字をabsolute要素にして、display:inlineなどにして先頭の位置に持ってくるとかすれば…とかどうです？（未確認いいねをした人: 居ませんなった時はスペース入れたりしてとりあえずは1行になるように調整するようにしましょうか。
そうですねー、それがとりあえずはベターかなと。
beforeの数字をabsolute要素にして、display:inlineなどにして先頭の位置に持ってくるとかすれば…とかどうです？
数字
absoluteにすると、被らないようにテキスト部分をpadding-left: ○pxみたいにすると思いますが、そうするとテキストの位置が固定されるので、数字が2桁以上になったときにテキストとの余白がきつくなったり、被っちゃったりする可能性がでてくるんですよね。flex ならテキスト位置が固定にせずに済むので、flexのままなんとかする方法があれば理想的なのですが…。いいねをした人: 居ません
- トピック「目次（ブロック）の第4階層の表示幅が枠のフル幅になっていない？」には新しい返信をつけることはできません。