使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%;
 }

链接到小提琴

Answer 1

white-space: nowrap;在课堂内使用.text它有效。

.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>