I'm trying to create a text-overflow: ellipsis; from the beginning, but in some specific context, it reverses the characters.
This is a CodePen to illustrate the problem: https://codepen.io/DWboutin/pen/yLaoxog
HTML:
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis">1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</div>
CSS:
div {
margin: 10px 0;
border: 1px solid black;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
I tried all word-break properties, wrapping the string into another span to force it to be ltr but it don't work.
Thank you for your help
unicode-bidi might help you with an extra wrapper to handle text direction:
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.
div {
margin: 10px 0;
border: 1px solid black;
width:max-content;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
.ellipsis span {
direction: ltr;
unicode-bidi: bidi-override;
}
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis"><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
original text :
<div>Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
Note, that extra wrapper needs to remain an inline element (display:inline) , an inline-box will not be part of the ellipsis rule but will overflow to the left, a block element will overflow on the right.
Related
I wanted to ellipse a latin text from lefthand side (It represents a path). Something like the following figure:
To making this I found the following css:
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
}
.red {
color: red;
}
and I use it like this:
<div class="ellipsis-left">
/Pollution/<span style="red">Air Pollution/</span>
</div>
But the problem is that slashes which separate parts of the path are not placed in the right position. In the following figure, the red slash must be shown at the end of the path. Is there any solution to solve this problem?
I want to reach something like this:
At the moment, as a solution I color the first slash with red as it places at the end of the string! Something like this:
<div class="ellipsis-left">
<span style="red">/</span>Pollution/<span style="red">Air Pollution</span>/
</div>
But this is not a good solution!
I had a similar problem and worked around it by stripping of the leading slashes in my paths. Slashes in the middle don't seem to be an issue.
Bit of a tricky situation you got there. The / aren’t normal letters, but rather fall under punctuation - and so they get treated differently by the LTR algorithm.
Tried different things - making the spans rtl again did not work, inserting the / as pseudo elements and trying to format them differently didn’t get me anywhere, and making the spans inline-block breaks the whole LTR thing of the parent …
Only thing I could come up with that seems to work, is to position those / absolutely. So they need wrapping into an element of their own, and the first path segment also needs to be wrapped in a span. You might wand to fiddle with the padding a bit, to get the spacing exactly right.
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
width:9em;
}
.ellipsis-left > span {
direction: ltr;
position: relative;
padding-right: .375em;
}
.ellipsis-left > span span {
position:absolute;
right: 0;
}
.red {
color: red;
}
<div class="ellipsis-left">
<span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
But wait, you want a leading slash in front of the whole thing as well … and that’s where it breaks again. Trying to add that into the “Pollution” span as well, I had it end up at the very end again, and putting it into its own “empty” path segment (<span><span>/</span></span>) did not work either. It does work, if that element contains an actual letter - but then I am having trouble “hiding” that again (plus, semantically really ugly) - wrapping the latter into another additional element, so that I could apply inline-block and a zero width to hide it, broke the whole thing again.
Using visibility to hide that extra letter worked, and a bit of negative margin helps hide the offset that leaves:
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
width:9em;
}
.ellipsis-left:nth-child(2) {
width: auto;
}
.ellipsis-left > span {
direction: ltr;
position: relative;
padding-right: .375em;
}
.ellipsis-left > span span {
position:absolute;
right: 0;
}
.ellipsis-left > span:first-child {
visibility:hidden;
margin-left: -.5em;
}
.ellipsis-left > span:first-child span {
visibility:visible;
}
.red {
color: red;
}
<div class="ellipsis-left">
<span>X<span>/</span></span><span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
<div class="ellipsis-left">
<span>X<span>/</span></span><span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
As I said, semantically rather ugly … but the best I managed to come up with so far.
Maybe someone can think of an alternative approach that works, something with flexbox and its order property or something.
Is it possible to get only the first part of an attribute using attr() in CSS? By this I mean, targeting the part of an attribute before a certain character (a space, mainly). For example, from the attribute hello="foo bar" I would like to extract either foo or bar, just by using CSS.
Sincerely, I'd expect the answer to be 'no', but I'm not really sure.
The generic answer is no but in some particular case we can find some tricks. Since you have a space as a delimiter we can rely on word-spacing and/or text-indent and some overflow in order to hide a part of the word then adjust the width.
Here is an example:
.first:before {
content: attr(data-hello);
word-spacing: 50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
.first:after {
content: attr(data-hello);
text-indent: -60px;
word-spacing:50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
<span class="first" data-hello="foo bar">
some text
</span>
I do have a table where I want to show the complete cell-content on hover.
I got this working with css, but now I'm facing a bug with all browsers except Chrome.
HTML extract:
<table><tr>
<td class="hover-text" style="width: 99px">
<div style="width: 99px">A long text</div>
</td>
</tr></table>
CSS extract:
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
This works all fine, except if I use any browser but Chrome, there is just one row and there is a horizontal scroll-bar. Then the cells are strangely resized. Without one of this conditions, I got no problems. Unfortunately the HTML is given from the framework I use.
I tried all sort of things, but at this point I'm at a loss..
You can see this issue here if you resize the table so that there is no horizontal scroll-bar, everything works as expected.
Your td element has a class of "hover-text" whereas your CSS uses the selector .text-hover. This means that the CSS you've provided has no affect on the HTML you've provided.
To fix this, either change your td element's class to "text-hover" or change your CSS selectors to .hover-text.
I have adjusted your CSS, Now its working fine for me.
Working Demo
CSS
.hover-text div{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width:100%;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Please mind the names you keep in html markup and you use in css. Even a professional may confuse this way.
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Found a solution: http://jsfiddle.net/FmY5R/10/
td{
display: inline-block
}
But I'm still not sure what caused the bug..
I was trying to make a link restricted to a width using the ellipsis.
The html is something like this:
<a class="blueLink2 destination-url-space" style="top:0;" href="http://google.com/uyv245">http://google.com/iuh345345345gthrthrthrth</a>
and the CSS is
.blueLink2 {
color: #0051A1;
display: inline;
font-size: 14px;
margin-left: 5px;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: 0;
}
.destination-url-space {
display: inline-block;
max-width: 200px;
overflow-x: hidden;
}
But it's working only in Chrome. Not working in Firefox.
Demo: http://jsfiddle.net/xE6HG/
you need to add white-space: nowrap; there
DEMO
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.
</p>
<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.
</p>
I want to have all text be ending with '...' but it only works for the inner div:
div {
border: solid 2px blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 40px;
}
<div>Test test test test test test
<div>asdasdasdasdasd</div>
</div>
http://jsfiddle.net/JU8Up/
is there any Solution so that also the text contained in the outer div gets the '...' ?
edit: seems like its a chrome problem, but still the fix in the answer below works
It works by adding float: left; to the div CSS, but without any further context I can't comment on what side-effects that may have in your implementation.
Example here.