使div宽度与其内容宽度相同

Question

我附上了这个问题的小提琴链接。我需要红点更接近文字。对于第一个＆amp;最后一项，它运作良好..但如果任何项目是多行..在右边有额外的空格..我想要点更接近第二项的文本。我试过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

在white-space: nowrap;课程内使用.text。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;