使div宽度与其内容宽度相同[重复]

Question

我附上了这个问题的小提琴链接。我需要红点更接近文本。对于第一个和最后一个项目，它运行良好..但是如果任何项目是多行的..它在右边有额外的空格..我希望点也更接近第二个项目的文本。我尝试了 flex： 0 但它会使整个文本区域变小。请帮助！

<div class="container">
 <div class="item">
   <span class="icon">1</span>
   <div class="text">News Section</div>
   <span class="red"></span>
 </div>
 <div class="item">
  <span class="icon">2</span>
  <div class="text">Sample123 Organizational announcement</div>
  <span class="red"></span>
 </div>
 <div class="item">
  <span class="icon">3</span>
  <div class="text">Sample Text</div>
  <span class="red"></span>
 </div>
</div>
.container {
  width:300px;
  padding: .5em 1em;
 }
.item {
  display: flex;
 }
.icon {
  width: 18px;
 float: left;
 }
.text {
  display: inline-block;
  background: yellow;
 }
.red {
  margin: 0 0 0 0.5rem !important;
  background: #FF0000;
  padding: 0 !important;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
 }

Link to fiddle

Answer 1

在 .text 类中使用 white-space: nowrap; 即可。

.container {
  width:300px;
  padding: .5em 1em;
 }
.item {
  display: inline-flex;
 }
.icon {
  width: 18px;
 float: left;
 }
.text {
  display: inline-block;
  background: yellow;
  white-space: nowrap;
 }
.red {
  margin: 0 0 0 0.5rem !important;
  background: #FF0000;
  padding: 0 !important;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
 }

<div class="container">
 <div class="item">
   <span class="icon">1</span>
   <div class="text">News Section</div>
   <span class="red"></span>
 </div>
 <div class="item">
  <span class="icon">2</span>
  <div class="text">Sample123 Organizational announcement</div>
  <span class="red"></span>
 </div>
 <div class="item">
  <span class="icon">3</span>
  <div class="text">Sample Text</div>
  <span class="red"></span>
 </div>
</div>