bugfix> html > 投稿

私の質問はグーグル検索可能であると確信していますが、答えが見つかりません。

バブルが段落幅+パディングの幅を持つ多くのSMS Androidアプリのように、効果をアーカイブしたいです。私が理解できることを願っています:)

ライブの例:

https://codepen.io/crova/pen/gzNzqG

html:

<div class="message">
  <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">
  <div class="message-main">
    <p class="message-info">John Smith, 15:14</p>
    <div class="bubble">
      <p class="message-content">
        lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
      </p>
    </div>
  </div>
</div>

scss:

.message {
  display: flex;
  margin-bottom: 2rem;
  min-height: min-content;
}
.author-photo {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  margin-right: 3rem;
  margin-top: 1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.message-main {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}
.bubble {
  height: 100%;
  max-width: auto;
  background-color: red;
  border-radius: 0.3rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  text-align: left;
  &::before {
    content: "";
    width: 2rem;
    height: 2rem;
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    background-color: red;
    display: block;
    transform: translateX(-1rem);
  }
}
.message-content {
  padding: 0 2rem;
  padding-bottom: 2rem;
  margin: 0;
}

回答 3 件
  • <div class="message">
      <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">
      <div class="message-main">
        <p class="message-info">John Smith, 15:14</p>
        <div class="bubble">
          <p class="message-content">
            lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
          </p>
        </div>
      </div>
    
    

    .message {
      display: flex;
      margin-bottom: 2rem;
      min-height: min-content;
    }
    .author-photo {
      border-radius: 50%;
      width: 5rem;
      height: 5rem;
      margin-right: 3rem;
      margin-top: 1rem;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    .message-main {
      /*
        width: 100%;
        min-height: 100%;
      */
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      max-width: 500px; /* Change to any max value you need */
    }
    .bubble {
      height: 100%;
      max-width: auto;
      background-color: red;
      border-radius: 0.3rem;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
      text-align: left;
      &::before {
        content: "";
        width: 2rem;
        height: 2rem;
        -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
        background-color: red;
        display: block;
        transform: translateX(-1rem);
      }
    }
    .message-content {
      padding: 1rem 2rem;
      margin: 0;
      display: inline-block;
    }
    
    
    <div class="message">
      <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">
      <div class="message-main">
        <p class="message-info">John Smith, 15:14</p>
        <div class="bubble">
          <p class="message-content">
            lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
          </p>
        </div>
      </div>
    
    

  • 行う必要がある唯一の変更は、「message-main」クラスから「width:100%」を削除することです

    .message {
      display: flex;
      margin-bottom: 2rem;
      min-height: min-content;
    }
    .author-photo {
      border-radius: 50%;
      width: 5rem;
      height: 5rem;
      margin-right: 3rem;
      margin-top: 1rem;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    .message-main {
      //width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
    }
    .bubble {
      height: 100%;
      max-width: auto;
      background-color: red;
      border-radius: 0.3rem;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
      text-align: left;
      &::before {
        content: "";
        width: 2rem;
        height: 2rem;
        -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
        background-color: red;
        display: block;
        transform: translateX(-1rem);
      }
    }
    .message-content {
      padding: 0 2rem;
      padding-bottom: 2rem;
      margin: 0;
    }
    
    
    <div class="message">
      <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">
      <div class="message-main">
        <p class="message-info">John Smith, 15:14</p>
        <div class="bubble">
          <p class="message-content">
            lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
          </p>
        </div>
      </div>
    </div>
    
    

  • コードが更新されました。

    更新された作業例

    あなたはクラスバブル width: max-content; で設定する必要があります  バブル内: display: inline-block; の前

あなたの答え