Make div width same as its content width

Question

I have attached a fiddle link to this question. I need the red dot to be closer to the text. For the first & last item, it works well..but if any item is multi line..it has extra whitespace at the right..i want the dot to be closer to the text for the second item also.I tried flex:0 but it makes the whole text area smaller.Please help!

<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

You don't need `float` on the icon if you are using `flex` – sol Jul 20 '17 at 08:08 — sol, Jul 20 '17 at 08:08

score 1 · Answer 1 · answered Jul 20 '17 at 08:07

1

Use white-space: nowrap; inside .text class it's working.

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

answered Jul 20 '17 at 08:07

Rohit Verma

3,657
7
37
75

breaks if the text is further long – Treesa Jul 20 '17 at 08:11
Can you show here? – Rohit Verma Jul 20 '17 at 08:13
[check here](https://jsfiddle.net/cyypxdpj/4/)..i want the text to break if its too long..but need the dot closer to the text.. – Treesa Jul 20 '17 at 08:16
Use `display: inline-flex;` instead of `display: flex;` in `.item` class. – Rohit Verma Jul 20 '17 at 08:21
hi..i have a container which is 300px..so the text overflows..i have updated the fiddle so that the you can see the container width – Treesa Jul 20 '17 at 08:34

Make div width same as its content width

1 Answers1