Moving the Ellipsis (...) to the left is done easily with:
.overflow-box{
direction: rtl;
text-overflow: ellipsis;
overflow: hidden;
}
But what if there's punctuation at the end, like a period (.) or question mark? It's also displayed on the left. I'd still like to see the period on the right. Is there an easy way around this?
Demo: https://jsfiddle.net/JoelMac/Lx4L15o3/5/
One way is to put the content of the div in a span with dir="ltr", forcing the content to be rendered in the standard order while still cutting off to the left as desired.
div {
width: 300px;
white-space: nowrap;
border: solid 1px #000;
margin-bottom: 10px;
direction: rtl;
text-overflow: ellipsis;
overflow: hidden;
}
<div>
<span dir="ltr">This is a sentence that is too long to fit in the space provided.
The ellipsis is where I want it.</span>
</div>
<div>
<span dir="ltr">Where is the question mark?</span>
</div>
However, this is not the only possible solution. As #reiallenramos's answer shows, you can also insert at the end of the content; that will work too.
An added benefit of the latter approach is that you won't need to change the markup; you can do it wholly in CSS, as follows:
div {
width: 300px;
white-space: nowrap;
border: solid 1px #000;
margin-bottom: 10px;
direction: rtl;
text-overflow: ellipsis;
overflow: hidden;
}
div::after {
content:'\200E';
}
<div>
This is a sentence that is too long to fit in the space provided.
The ellipsis is where I want it.
</div>
<div>
Where is the question mark?
</div>
This would then be my preferred method, but you can choose whatever you want.
tl;dr: append to the end of your text like this
<div>
Where is the question mark?
</div>
Looks like a duplicate of Why is a trailing punctuation mark rendered at the start with direction:rtl?
Punctuations really do behave this way according to this.
Related
I have a div with different number of span inside depending on my code, my problem is, sometimes the last span does not fit the space and everything lost the align, what I want to do is applied my "truncate" class to the last element if needed, there is an example:
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
with this configuration, and also aplying "truncate" everything moved to left, and I stop watching "one" instead "four" as I want, either the "..." are not shown.
I also tried aplied truncate to the last child with same result:
.truncate:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Where is my mistake?
Check out the :last-child pseudo-class.
Might not be relevant to you now, but I had this problem, and I solved it with flex-shrink: 0 which tells certain elements never to shrink, which means that last element shrinks.
See example: https://jsfiddle.net/68usz20p/2/
div {
display: flex;
overflow: hidden;
width: 175px;
border: 1px solid red;
}
div span:not(:last-child) {
margin-right: 1ch;
flex-shrink: 0;
}
div span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can using css :last-child Selector
.truncate span:last-child {
display:none; visibility:hidden;
}
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
Preview at https://jsfiddle.net/itsselvam/yt9srxLo/
If I've a very long text like this (for example in a table):
<p class='line'>
<span class='fixed1'>FIXED</span>
<span class='long_text'>This is my very very very very long text</span>
<span class='fixed2'>FIXED</span>
</p>
By default the <p> width is 100% and if the text is longer than the screen it's showed on multi lines. Instead I want it in a single line where only the last N letter are showed.
Here some example:
Screen large enough:
FIXED This is my very very very very long text FIXED
Screen not enough large, text overflow.
FIXED This is my ve... text FIXED
I can obtain something similar using:
span.long_text {
overflow: hidden;
text-overflow: ellipsis;
}
Is it possible to obtain the effect I described? How?
You can use white-space: nowrap to force it to stay in a single line.
text-overflow: ellipsis will replace the end of your content with '...' when overflow occurs. However span must be a block for text-overflow to work, so set its display property to inline-block or block.
Demo: https://jsfiddle.net/1bmdu5xd/
Ellipsis only work with single line things so that's OK here. The problem is with those "N letter".
Here's a starter with :after (you must have your N last letters in some CSS. Suboptimal => https://codepen.io/PhilippeVay/pen/vWMePJ?editors=0100
.line {
display: flex;
border: 1px solid black;
width: 240px;
}
.line > * {
white-space: nowrap;
}
.long_text {
position: relative;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
background: yellow;
padding-right: 2rem;
}
.long_text::after {
content: "g text";
position: absolute;
right: 0;
}
<p class='line'>
<span class='fixed1'>FIXED</span>
<span class='long_text'>This is my very very very very long text</span>
<span class='fixed2'>FIXED</span>
</p>
It could be content: attr(data-last-letters) and <span class='long_text' data-last-letters="g text"> which now works in most browsers.
Or background-image: -moz-element(#someId); that copy-paste an element elsewhere and that only works in Firefox (for the past 7 years: won't work cross-browser anytime soon I guess).
I have a limited area (width: 200px) for displaying a full name. I have to follow such html-construction (two SPANs inside DIV):
.fullName {
width: 200px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="fullName">
<span class="firstName">
AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
</span>
<span class="lastName">
EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
</span>
</div>
Expected behavior:
first and last names aren't too long - should be displayed in one line.
first and last names are long enough (but less than 200 px for each) - should be displayed in two lines
one of tne names takes less than 200px, other one takes more than 200px - should be displayed in two lines with ...-sign in the end of the line with the longest name
both names take more than 200px each - should be displayed in two lines with ...-signs in the end of the lines
As you can see the code above meets all the expectations in Chrome and Firefox. However it doesn't work properly in IE - it just trims the 2nd line without adding a ...-sign.
Pure CSS solution preferred. I have a JS-solution but my team insist on pure CSS solution for suck little issue.
In order text-overflow: ellipsis; to work the element shall establish a box - to be either display:block or display:inline-block, try this one:
And the <span> has display:inline by default.
.fullName {border: 1px solid blue; width:50%}
.fullName > span {
max-width:100%;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div class="fullName">
<span class="firstName">
AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
</span>
<span class="lastName">
EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
</span>
</div>
I am trying to prevent a contenteditable div from word wrapping.
The white-space: pre property does not work for a contenteditable.
This is the css:
.preDiv{
border:1px solid blue;
overflow:auto;
width:100px;
white-space:pre;
}
Here is a fiddle:contentEditable-fiddle
I want it to work the way it does as if it wasn't a contenteditable.
I need this because, in my real code the div has line numbers next to it and they are no longer correct when the div starts word-wrapping, when the width of the div changes.
I have tried to use white-space:nowrap but then the entire text is set on one line.
Does anyone have an idea how I can prevent this rearranging of the text when the width changes?
Luckily the answer was out there on this fiddle:contenteditable with white-space pre
This is the CSS this person used:
#editor {
border: 1px solid black;
height: 200px;
width: 300px;
white-space: pre;
word-wrap: normal;
overflow-x: auto;
}
So it needed the extra: word-wrap: normal;
Thank you Rick for your help, it boosts the morale!
Really interesting question.
I've gotten it to work in Chrome (at least) by:
Putting preDiv in a wrapper element.
Moving the overflow style to the wrapper.
Adding display: table-cell; to preDiv.
No idea why #3 is needed. I got there through trial and error.
changeWidth=function(){
document.getElementById('wrapper').style.width='100px';
}
#wrapper {
overflow:auto;
border:1px solid blue;
}
#preDiv{
width: 500px;
white-space: pre;
display: table-cell;
}
<div contenteditable id="wrapper">
<div id='preDiv'>
<span>hello hello hello hello</span>
<span>Here I am, Here I am,Here I am,Here I am,</span>
and so forth, and so forth and so forth
</div>
</div>
<button onclick='changeWidth()'>change Width</button>
I'm trying to get an ellipsis to display on my long text using CSS. This seems to work fine when the text doesn't contain spaces, and so can't be broken (i.e. word wrapped) but when it contains spaces the ellipsis doesn't appear.
My code so are is:
<!DOCTYPE html>
<html>
<head>
<style>
span {
width: 150px;
display: inline-block;
border: 1px dotted blue;
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
padding: 4px;
}
</style>
</head>
<body>
<div>
<span>
This is some long text that I want to have an ellipsis on.
</span>
</div>
<div>
<span>
afejaklfjefklafjeklfjeklfjeklfejfklejfkfjeklfjeklfejfklaejfeklfejfklejfklfejfkl
</span>
</div>
<body>
</html>
Here's my fiddle.
If you add white-space:nowrap ellipsis will come into picture. Reason is your text with spaces will wrap down in case of spaces and it doesn't need to have ellipsis. You can see it in action if you remove your overflow-hidden and text will be displayed wrapped.
span {
width: 150px;
display: inline-block;
border: 1px dotted blue;
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
padding: 4px;
white-space: nowrap;
}
From doc
The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box.
text-overflow comes into play only when:
the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)