I have the following situation:
But what I want to do is align right of my container, and if text overflows his container, show ellipsis, instead of now which the alignment is from left.
My expectation:
AAA
BBBBBBBBBBBBBB...
CCC
And in cases where the first or third line contains more characters:
AAAAAAAAAAAAAA...
BBBBBBBBBBBBBB...
CCC
You can do this:
CSS
.box {
display: inline-block;
}
p {
width: 80px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
HTML
<div class="box">
<p>AAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBB</p>
<p>CCC</p>
</div>
DEMO HERE
Using pure CSS, add these attriutes:
text-align:right;
overflow: hidden;
text-overflow: ellipsis;
text-align:right; aligns your text to the right.
overflow: hidden; plus text-overflow: ellipsis; will make text overflow and be replaced by an ellipsis.
Working example
Related
Why the ellipsis does not show when a header tag is overflown? How can I show the ellipsis for header tags?
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
Try adding
h4 {
display: inline;
}
and you'll see it works as expected
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
display: inline;
}
<div>
<h4>Ellipsis does not work with header tags</h4> <br>
<span>Ellipsis does work with span tags</span>
</div>
That is because the text-overflow: ellipsis only applies to direct descendant text-nodes. You should therefore also apply the same style to the h4 selector as well, to achieve the same effect.
I would not recommend setting h4 to display: inline, because that means that you will have to manually insert breaking space after it.
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
overflow: hidden;
text-overflow: ellipsis;
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
Unlike span, h4 is a block level element so text-overflow need to be applied to it to work. Same for overflow:.
This property specifies rendering when inline content overflows its end line box edge in the inline progression direction of its block container element ("the block") that has overflow other than visible. ref
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
text-overflow: inherit;
overflow: inherit;
/* no need to inherit white-space because it inherited by default */
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
h4 is a block element, so assign text-overflow on that element like this not in div.
h4, span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
display:inline-block;
}
div {
width: 200px;
}
<div>
<h4>Ellipsis does not work with header tags</h4>
<span>Ellipsis does work with span tags</span>
</div>
I have < p > tag and text there.
Css:
p {
max-height: 250px;
}
I want to make my text hide last word which can't fit in 250px of height and change it to "...".
I have tried it:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
It worked but not as I want. It hide word which can't fit in the first line, but not the the 250px of height. Is there anyway to do so? Thanx in advance.
You need to use the overflow-y property to hide the y-axis.
More about overflow-y.
CSS
p {
max-height: 250px;
width: 100px;
white-space: nowrap;
overflow-y: hidden;
}
HTML
<p>Some text goes here</p>
Try this it will help sure
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-height: 250px;
width: 150px;
}
I have following structure in dropdown suggestions for my autocomplete plugin
<div>
<svg>//some things here</svg>
<span>My long text</span>
<span>Some short text</span>
</div>
The div has following CSS properties -
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%
The span has following properties -
float: left;
I am unable to understand where it went wrong and have tried almost all SO solutions answered in similar problems till date. A desperate callout!
Update: http://codepen.io/shreeshkatyayan/pen/wzPYvO CSS structure - non-working for obvious reasons.
Here are two examples which may help.
Add the overflow to the span instead of the div which will give each span the ellipsis property.
div.one {
display: inline-block;
width: 100%;
}
div.one span {
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 75px;
margin-right: 10px;
}
Or to give the div the ellipsis property instead of the span, remove float: left from the span and add a width to the div.
div.two {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
div.two span {
margin-right: 10px;
//float: left;
}
updated jsfiddle: https://jsfiddle.net/75rmaqwb/1/
There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:
http://pvdspek.github.com/jquery.autoellipsis/
http://dotdotdot.frebsite.nl/
http://keith-wood.name/more.html
http://github.com/tbasse/jquery-truncate
I have the following container of text:
<div class="cardTitles">
<div class="title">
<div class="titleContent">
<i class="fa fa-star-o"></i>
<b>Some long long long title here</b>
</div>
</div>
... title divs ...
</div>
css:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
I want to make text full width + text-overflow: ellipsis. So when I resize browser all title divs should be full 100% width of the parent cardTitles with cut text to three dots at the end.
I found that this is possible using flex. Here is the possible answer:
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.
You can find an example here: http://88.198.106.150/tips/cpp/
Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.
Try this out:
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's and updated jsFiddle
No Flex but could work also ... try it.
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow ellipsis with 100% width
The width needs to be added in pixels, percentage wont work along with other three properties as given below:-
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
This div uses "text-overflow:clip":
This is some long text that will not fit in the box
This div uses "text-overflow:ellipsis":
This is some long text that will not fit in the box
Is it actually possible to use text-overflow: ellipsis, when you don't set the width?
Instead of width I need to set it until 100px from the right. If the text reaches 100px from the right, it will be hidden and with dots in the front.
You should just have to add padding-right: 100px; to the element with text in.
HTML
<p>some text</p>
CSS
p {
text-overflow: ellipsis;
padding-right: 100px;
white-space: nowrap;
overflow: hidden;
}
Here is a JsFiddle with the above code.
You can use both margins: left and right to make it work:
HTML:
<div class="parent">
<div class="test">some pseudo-centered text some pseudo-centered text some pseudo-centered text some pseudo-centered text some pseudo-centered text</div>
</div>
CSS:
.test {
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 100px;
}
A working example online can be seen here: http://jsfiddle.net/rqb3W/1/
text-overflow: ellipsis only works if width or max-width is set in pixels. You can get around this by using width: calc (69%) which gets converted to px.
So to answer your question you can try float:right with a margin or use width: calc(100% - 100px); with margin-right: 100px
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow