YouTube

コピペでCSS テキストを横並びに&端まで行ったら改行

HTML
<div class="user-top-info">
    <div class="user-top-de">先生: No.3</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div></div>
CSS
.user-top-info {
    display: flex;
    flex-wrap: wrap; /* 要素が幅を超えた場合に折り返す */
    gap: 10px; /* 要素間の間隔を設定 */
    margin-bottom: 20px; /* 下に適度な余白を追加 */
}

.user-top-de {
    display: inline-block;
    padding: 3px 10px;font-size: 12px; /* 文字サイズを小さくする */
    background-color: #f0f0f0; /* 任意の背景色 */
    border-radius: 5px; /* 角を丸くする */
    margin-bottom: 0px; /* 下に適度な余白を追加 */
    white-space: nowrap; /* テキストが折り返されないようにする */
}

このコードでは、次のことを行います:

  1. user-top-info クラスを持つ div 要素を用いて、全体のコンテナを作成します。このコンテナ内で要素が横並びになります。
  2. user-top-de クラスを持つ各要素には、背景色、パディング、マージン、ボーダー半径(角丸)を設定します。
  3. flex-wrap: wrapuser-top-info クラスに適用し、要素がコンテナの幅を超える場合に自動的に折り返されるようにします。
  4. gap: 10px で、各要素の間に10pxの間隔を設けています。

これにより、先生No.と講師歴が横並びで表示され、適度な間隔と改行が追加されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

error: Content is protected !!
ACFフィールド "place_id" の登録件数: 16