span tag text-overflow:ellipsis without using width

Question

I want to give text-overflow:ellipsis to my span tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="input-group date event_box" style="width: 100%;">

                                    <span class="form-control event_rearrange" style="overflow: hidden; text-overflow: ellipsis; word-wrap: normal;"> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span>

                                    <span class="input-group-addon" style="background:#000000;" >

<span class="glyphicon glyphicon-pencil " style="color: #FFFFFF;"></span>

</span>
  
  </div>

the output I get is result that i get

i don't want to increase width.

any help would be great.

thank you.

score 1 · Answer 1 · edited Apr 04 '23 at 11:45

Add Some Custom width and Using display: inline-flex; in Css

Snippet Example

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="input-group date event_box" style="width: 100%;display: inline-flex;">
   <span class="form-control event_rearrange" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span>
   <span class="input-group-addon" style="background:#000000;min-width: 42px;" >
       <span class="glyphicon glyphicon-pencil " style="color: #FFFFFF;"></span>
   </span>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:07

.ellipsis { text-: ellipsis; }

<p class=" ellipsis">This is an example text showing nothing interesting but the truncated content via text- shorthand property.</p>

You can check this link:-https://css-tricks.com/almanac/properties/t/text-overflow/

text-overflow:ellipsis; only works when the following are true:

The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
The element must have overflow:hidden and white-space:nowrap set.

& try this link:-CSS text-overflow: ellipsis; not working?

span tag text-overflow:ellipsis without using width

2 Answers2