时间戳

首页 > 解决方案 > CSS - 如何将容器宽度调整为段落长度，防止它换行？

html - CSS - 如何将容器宽度调整为段落长度，防止它换行？

问题描述

我确定我的问题可以通过谷歌搜索，但我找不到答案。

我想在许多 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;
}

标签： htmlcsssass

解决方案

您需要做的唯一更改是从“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>

推荐阅读