title: Position of whitespace while using text-overflow: ellipsis;
body: <p>I have a top bar for a mobile website which looks like this:
  <img src="https://i.stack.imgur.com/rfesa.png" alt="enter image description here"></p>
  
  <p>The user can open a personal menu by clicking his/her name. 
  When the name of the person is very long (blue bar) I want to shorten it using <code>text-overflow: ellipsis</code>.</p>
  
  <p>I got that to work (looks like the blue bar) but now if I have a short name the arrow icon is shown on the right (red bar). I want to keep the arrow next to the name and the remaining whitespace on the right of the arrow, as in the green bar.</p>
  
  <p>I don't want to set a width or max-width to any of the elements (except maybe the button) because I want it to work on different mobile devices, therefore the available width is unknown. </p>
  
  <p>Is there any way to achieve this with just HTML and CSS? What I have done so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button&gt;Log off&lt;/button&gt;
  &lt;div id="menu"&gt;
      &lt;span id="icon"&gt;+&lt;/span&gt;
      &lt;span id="name"&gt;John Withthelonglastname&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  #icon { float:right;}
  button { float: right;}
  </code></pre>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/webwolfe/L07t0zk7/" rel="nofollow noreferrer">http://jsfiddle.net/webwolfe/L07t0zk7/</a></p>