CSS实现：调整容器宽度适配段落长度，避免换行

我明白你想要实现类似安卓短信应用里的气泡效果——气泡宽度刚好适配段落内容（加上内边距），而不是撑满整个容器。看了你提供的代码，问题主要出在气泡的宽度控制和父容器的对齐方式上，我来帮你调整一下：

核心修改思路 #

1. 让气泡容器只包裹内容宽度，同时限制最大宽度避免内容过长时太突兀
2. 调整父容器的对齐方式，防止气泡被强制拉伸到满宽
3. 修正气泡箭头的定位，确保它始终在气泡的左侧顶部位置

修改后的完整代码 #

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-items: flex-start; /* 关键：让子元素不拉伸到满宽 */
} 

.bubble { 
  width: fit-content; /* 自适应内容宽度 */
  max-width: 70%; /* 限制最大宽度，避免内容过长 */
  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; 
  position: relative; /* 为箭头定位做准备 */
  
  &::before { 
    content: ""; 
    width: 1rem; 
    height: 1rem; 
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%); 
    clip-path: polygon(100% 0, 0 0, 100% 100%); 
    background-color: red; 
    display: block; 
    position: absolute; 
    left: -0.5rem; /* 调整箭头位置 */
    top: 0; 
    transform: rotate(0); /* 移除不必要的平移 */
  } 
} 

.message-content { 
  padding: 1.5rem 2rem; /* 调整内边距让内容更美观 */
  margin: 0; 
}

关键修改点说明 #

• message-main 里的 align-items: flex-start：原来的 align-content 是针对多行flex容器的，改成 align-items 才能让子元素（气泡）保持自身宽度，不被拉伸到父容器的100%宽度。
• bubble 里的 width: fit-content：这是现代浏览器支持的属性，能让元素宽度刚好包裹内容（加上内边距）；搭配 max-width 可以防止内容过长时气泡太宽影响布局。
• 气泡箭头的定位：改成绝对定位，相对于气泡容器，这样不管气泡宽度怎么变，箭头都能固定在左侧顶部位置，同时调整了箭头的大小和位置让它更自然。

这样修改后，气泡就会像安卓短信那样，宽度自适应内容长度，同时保持美观的气泡样式啦！

内容的提问来源于stack exchange，提问作者Crova