CODEWITHSUNDEEP
csstwitter-bootstrap-3
Slava
Slava

Reputation: 6650

CSS style to truncate long text doesnt work

I need page title to be truncated with ellipsis if it is longer than the availbale space.

Demo - short title:

enter image description here

Demo - long title (css styling doesnt work):

enter image description here

All comments saying to add width - doesnt work either

enter image description here

Upvotes: 3

Views: 1597

Answers (4)

AnjuRaj
AnjuRaj

Reputation: 298

This worked for me.

Place the anchor tag inside a div.

<div class="title-div">
<a class="navbar-title">Some very long title</a>
</div>

The css should be as shown below:

.title-div
{
    max-width: 128px;
    overflow: hidden;    
    text-overflow: ellipsis !important;
}
.navbar-title
{
    white-space:nowrap !important;
}

Upvotes: 0

Lee
Lee

Reputation: 4323

You can actually shorten the titl, and add the three dots at the end, then save that as a class, and apply it to the heading tag.

But it requires that your container div have a width set, or else this will push it wider, which is what is happening.

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

https://jsfiddle.net/leecollingsco/Lq34xquf/1/

Upvotes: 0

maali
maali

Reputation: 143

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

Upvotes: -1

Alexander Holman
Alexander Holman

Reputation: 929

add your ellipsis styling to the .navbar-header instead, you also need to define a width or max-width, you can see this working on my codepen

alternatively you can add width or max-width to the .navbar-title but as its an inline element you will need to change the display to inline-block too I believe.

Upvotes: 2

Related Questions