CODEWITHSUNDEEP
htmlcss
Adracus
Adracus

Reputation: 1009

Whitespace nowrap text fit div

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>

Upvotes: 1

Views: 16108

Answers (5)

Djouuuuh
Djouuuuh

Reputation: 1167

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.

Upvotes: 0

Kishor Sawant
Kishor Sawant

Reputation: 88

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>

Upvotes: 2

Rahiil
Rahiil

Reputation: 110

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

Upvotes: 0

singe3
singe3

Reputation: 2105

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;
}

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

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

Upvotes: 1

Related Questions