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.

Improve this question
3
  • 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? Commented Oct 11, 2017 at 3: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 ". . ." Commented Oct 11, 2017 at 4:04
  • 3
    Possible duplicate of text-overflow: ellipsis not working Commented Oct 11, 2017 at 5:10

3 Answers 3

Reset to default
1

Please check this. 

h3 { width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
<div> <h3>Sometext</h3> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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>

Improve this answer

1 Comment

then you use text-overflow: ellipsis; but it will display somet... using width 72px
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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.