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)
Related
This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 4 years ago.
I am trying to limit the width of an A html element which so it would be snortened and avoid taking too much space on screen.
At this moment I do not have the flexibility of changing the structure of the document so I am looking for a pure CSS solution.
I tried this but it didn't had any effect, the text still takes all the space available.
<html>
<head>
<style>
a.data {
color: red;
text-overflow: ellipsis;
width: 4ch;
max-width: 4ch;
overflow: hidden;
}
</style>
</head>
<body>
<span>
<a class="data">012345668</a>
and some other text
</span>
</body>
</html>
Changing the a's display property to inline-block will do the trick:
a.data {
color: red;
text-overflow: ellipsis;
width: 4ch;
max-width: 4ch;
overflow: hidden;
display: inline-block;
}
<span><a class="data">012345668</a> and some other text</span>
The reason is that the default display for a is inline. inline elements don't accept width, max-width, min-width and the same for height.
Try this:
a.data {
color: red;
text-overflow: ellipsis;
max-width: 4ch;
display:inline-block;
overflow:hidden;
vertical-align:top;
}
<html>
<head>
</head>
<body>
<span style="display:inline-block">
<a class="data">012345668</a> and some other text
</span>
</body>
</html>
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.
In Chrome and Firefox both lines show an ellipsis at the end. However in IE11/Edge only the first line has an ellipsis and the second line is simply cutoff. Is there anyway to get IE11/Edge to work similar to Chrome/Firefox?
body {
font-family: 'Arial';
}
div.wrapped-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100px;
}
<div class="wrapped-text">
This is a test of wrapped<br>
text that should overflow
</div>
For anyone in the same situation I've found the only way to get this to work is to change the HTML a little so that each line in the div is wrapped in its own div - and those child divs get the css to add the ellipsis.
body {
font-family: 'Arial';
}
div.wrapped-text {
width: 100px;
}
div.wrapped-text > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="wrapped-text">
<div>This is a test of wrapped</div>
<div>text that should overflow</div>
</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>
Link to jsfiddle: http://jsfiddle.net/WBZng/1/
I have a HTML structure that looks like this:
<div>
<input/>
<span>Label comes here...</span>
</div>
Both input and span should have display:inline. Also, span has word-wrap:break-word so that a long text without space still becomes wrapped. However, if the text is long, then the <span> is displayed in a new line instead of preserving display:inline-block. This is not an issue if there is a space in <span>.
You can consider giving ellipsis to the span element:
.panel span {
width: 20px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Fiddle: http://jsfiddle.net/WBZng/3/