折り返すときにCSSテキストを揃える

debugcn 投稿 Dev

ビルダメージ

モバイルなどでウィンドウのサイズを変更すると、テキストの配置に問題が発生します。HTMLは次のとおりです。

.count-panel {
  float: left;
  width: 64px;
  border: 1px #888 solid;
}

.count {
  font: 15px/18px Roboto, sans-serif;
  font-size: 42px;
}

.message {
  font-size: 20px;
}

.row {
  clear: both;
  margin-bottom: 16px;
}

<div class='table'>
  <div class='row'>
    <div class='count-panel'>
      <span class='count'>1</span>
    </div>
    <div class='message'>This is line one</div>
  </div>
  <div class='row'>
    <div class='count-panel'>
      <span class='count'>2</span>
    </div>
    <div class='message'>This is line two which is longer than the rest so it can test wrapping</div>
  </div>
  <div class='row'>
    <div class='count-panel'>
      <span class='count'>3</span>
    </div>
    <div class='message'>This is line three</div>
  </div>

大きいサイズの場合：大きい

小さいサイズの場合：小さい

2行目のテキストは、他のテキストと揃えて、画像のように左にしっかりと折り返さないようにする必要があります。ありがとう。

クープ

float: leftカウントパネルが同期しなくなっているのはあなただけです。

代わりにあなたの例を置き換えましたdisplay: flex。レイアウトに使用することを意図したものではなかったため、要素を配置するときはフロートを避けることをお勧めします。Flexははるかにクリーンなソリューションであり、レイアウト選択の柔軟性が高まると思います。:-)

また、HTMLレイアウトを少し修正して、数値自体に境界線を含め、小さいデバイスでテキストコンテンツのフルサイズが拡大されないようにしました。

.count {
  font: 42px Roboto, sans-serif;
  min-width: 64px;
  border: 1px #888 solid;
  text-align: center;
  max-height: max-content;
}

.message {
  font-size: 20px;
}

.row {
  display: flex;
  flex-direction: row;
  margin: 0 10px 16px 0;
}

<div class='table'>
  <div class="row">
    <span class="count">1</span>
    <div class="message">This is line one</div>
  </div>
  <div class="row">
    <span class="count">2</span>
    <div class="message">This is line two which is longer than the rest so it can test wrapping</div>
  </div>
  <div class="row">
    <span class="count">3</span>
    <div class="message">This is line three</div>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]