0

I have code like this. html:

<div>
    <h3>Sometext</h3>
</div>

css: 

div {
    width: 20px;   
}
h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Problem here is that H3 tag "Sometext" should only written as "Somete" but both overflow and text-overflow doesn't help. H3 tag still can be seen.

Genjik
  • 320
  • 1
  • 7
  • 20
  • I don't really understand what you want.. You want it to display "Somete" but you don't what it to be seen.. Can you explain it clearly? – Shadow Fiend Oct 11 '17 at 03:52
  • I mean that I have div and h3 in this div. If the text can't fit in special width of div I want to make last 3 words of this text (which can fit in) be hidden and replaced with ". . ." – Genjik Oct 11 '17 at 04:04
  • 3
    Possible duplicate of [text-overflow: ellipsis not working](https://stackoverflow.com/questions/7993067/text-overflow-ellipsis-not-working) – Satheesh Kumar Oct 11 '17 at 05:10

3 Answers3

1

Please check this. 

h3 {   
    width: 70px;  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
<div>
    <h3>Sometext</h3>
</div>
ankita patel
  • 4,201
  • 1
  • 13
  • 28
0

use text-overflow:clip; and width to h3

h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    width: 59px;
}
<div>
    <h3>Sometext</h3>
</div>
Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25
0

text-overflow: ellipsis is also working fine for me but u decleare width 20px is so less to show a text with three ellipsis dot (...). that's why it's only showing simple ...

just increase width like 70px and it will work..and when u mention overflow hidden then u don't need to specify text-overflow: clip.

width: 70px; text-overflow: clip