Whitespace nowrap text fit div

Question

I've got a div with fixed width and a quite long text. This long text is set to appear in one line via white-space: no-wrap. The problem is, that I can't figure out how to make the font size of this text fit into the div (without making breaks to the text). Could anyone help please?

Example layout:

<div style="width: 100px; max-width: 100px;">
  <span style="white-space: nowrap">This is a too long text to normally fit in</span>
</div>

score 2 · Accepted Answer · answered Jul 09 '14 at 08:53

2

Try this:

<div style="width: 100px; max-width: 100px;overflow: hidden;text-overflow: ellipsis;">
   <span style="white-space: nowrap">This is a too long text to normally fit in</span>
</div>

answered Jul 09 '14 at 08:53

Kishor Sawant

88
1
10

5

Why it has been chosen as the best answer ? It cuts the text with "...". The questioner wanted `to make the font size of this text fit into the div (without making breaks to the text)` Really wierd – singe3 Jul 09 '14 at 09:43
Adracus wanted some text and remaining text as(...) in that fixed size div. He didn't want to adjust every thing in that div by reducing or increasing font size. – Kishor Sawant Jul 09 '14 at 09:49
Lol ? Read his first message again that's all the contrary – singe3 Jul 09 '14 at 09:50

score 1 · Answer 2 · answered Jul 09 '14 at 08:37

1

Try like this: Demo

css:

.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Text will be in 1 line but in the above css code you can see dots(...) if it exceeds specified width

answered Jul 09 '14 at 08:37

G.L.P

7,119
5
25
41

score 0 · Answer 3 · answered Jul 09 '14 at 08:46

If you are allowed to add some library in your project, this one would do the trick :

https://github.com/jquery-textfill/jquery-textfill

You would add in javascript :

$('.truncate').textfill({ widthOnly: 100px });

And you also need to keep the css attribute

.truncate{
    white-space: nowrap;
}

score 0 · Answer 4 · answered Jul 09 '14 at 08:47

0

Set font size <span style="font-size:17px;white-space: nowrap;">This is a too long text to normally fit in</span>

answered Jul 09 '14 at 08:47

Rahiil

110
1
11

score 0 · Answer 5 · edited May 23 '17 at 12:31

0

I think that another guy has the exact same request as yours. Have a look at this topic where several jQuery/CSS solutions have been found.

edited May 23 '17 at 12:31

Community

1
1

answered Jul 09 '14 at 09:09

Djouuuuh

1,147
8
16

Whitespace nowrap text fit div

5 Answers5