Clever Geek Handbook

Position of spaces when using text overflow: ellipsis;

I have a top bar for a mobile site that looks like this: enter image description here

The user can open the personal menu by clicking on its name. When a person's name is very long (blue bar), I want to shorten it using text-overflow: ellipsis

.

I got this to work (looks like a blue bar), but now if I have a short name the arrow icon is displayed on the right (red bar). I want to keep the arrow next to the name and the remaining spaces to the right of the arrow, as in the green bar.

I dont want to set width or max width for any of the elements (except maybe the button) because I want it to work on different mobile devices, so the available width is unknown.

Is there a way to achieve this with just HTML and CSS? What I have done so far:

Html

<button>Log off</button>
<div id="menu">
    <span id="icon">+</span>
    <span id="name">John Withthelonglastname</span>
</div>

CSS

#name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#icon { float:right;}
button { float: right;}

The spell is here: http://jsfiddle.net/webwolfe/L07t0zk7/

+3


source to share


3 answers


You can achieve this easily with HTML and CSS using Flex

.menu {
  width: 200px;
  padding: 2px;
  color: white;
  display: flex;
}
.blue {
  background: blue;
}
.red {
  background: red;
}
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon {
  padding-left: 5px;
  padding-right: 5px;
  flex: 1 1 auto;
}
button {
  min-width: 70px;
}
      

        
        
        
      

    
<div class="menu blue">
  <span class="name">John Withthelonglastname</span>
  <span class="icon">+</span>
  <button>Log off</button>
</div>

<br>


<div class="menu red">
  <span class="name">John Doe </span>
  <span class="icon">+</span> 
  <button>Log off</button>
</div>
Run codeHide result




Pay attention to FlexyBoxes as a fiddler to play with its settings.

PS: it's better to use classes instead of IDs for general purpose items.

+1


source


You are using the content to add to the icon after the name.



#name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#name:after{
    content: ' +';
    position: absolute;
}
+1


source


Instead of an icon, span

you can use a pseudo-selective slider :before

:

#name:before
{
content:'+';
z-index:999;
display:inline-block;
float:right
}

fiddle

+1


source






More articles:


All Articles