I have a span that will contain text. I would like the span to expand to a maximum of 500px to accommodate the text inside. After the max is reached I would like the text to display ellipses for any text overflowing the max-width. Is this possible? I tried the following, but this did not do the trick.
Thanks
{
position: absolute;
top: 13px;
left: 44px;
max-width: 500px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Spans are display:inline by default, which can cause odd behavior when dimensions are assigned to it. If it's being positioned absolutely anyway, you should use a div or set the span to display:block instead.
I'm not sure if this will fix your problem, but it's a start :)
This is an interesting article about getting ellipsis to work on all modern browsers without using javascript.
This javascript will truncate your text and add an ellipsis. (Without breaking it in the middle of a word or markup)
Barelyfitz Truncate js.
Not sure on the browser compatibility of i, but it should work :)
Hope it helps.
This worked for me
display: inline-block; // This is what you're missing
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.elipsis {
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
<span class="elipsis" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
Related
<pre style="overflow-x: auto; width:100%">
Will never scroll.
</pre>
<pre style="overflow-x: auto; width:500px">
Will scroll but is not of responsive design.
</pre>
I want to have a pre-element that will be more responsive in direct relation to the parent element, but the parent element has no fixed width. Using width:100vw or even something like width: calc(100vw - 300px) is not an option because the site has too many dynamic elements. I would like to accomplish this with CSS alone. Is this an issue I am only going to be able to resolve with JavaScript?
Update:
It appears that overflow-x: auto does not work unless you use a static width. In my case everything (including parent elements) is responsive, nothing is set to a static width. I solved the problem by just using overflow-x: scroll
The question in incorrect in stating that width: 100% will result in never scrolling, as can be seen in the following examples. All of the pre tags have width: 100%.
You may have had an issue with width: 100vw because 100vw is not the same as 100%. 100vw is equal to the width of the viewport, but 100% width is the width of the nearest parent element. In the bottom two examples, 100% width is the width of their respective divs, and will be responsive.
pre {
overflow-x: auto;
width: 100%;
}
#medium-container {
padding: 10px;
width: 500px;
border: 1px dotted red;
}
#small-container {
padding: 10px;
width: 250px;
border: 1px dotted blue;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
<div id="medium-container">
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
</div>
<div id="small-container">
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
</div>
I'd like everything to say on one line even if the row is wider than the width of the screen and if I want to access the later elements I just have to use the scroll of the screen to get righter.
I tried this:
CSS:
.sth{
display: inline-block;
overflow-x: scroll;
}
It doesn't work, can someone help please?
Thanks :)
Is this what you are tying to achieve?
div {
max-width: 100%;
overflow-x:scroll;
white-space: nowrap;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I have problem with adding 3 dots on the end of div. I my text is too long and don;'t have enough space to display, on the of div I want to display 3 dots.
I know for text-overflow ellipsis but now workig correct on IE and Firefox.
Is it possible to do on another way.
https://jsfiddle.net/kq1Lp6og/
I want to create ease in CSS, but don't know how without ellipsis.
HTML
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSS
div{
height:38px !important;
overflow: hidden;
}
div {
max-width:100%;
height:38px;
overflow: hidden;
position: relative;
line-height: 1em;
max-height: 3em;
text-align: justify;
padding-right: 1em;
font-size: 20px;
}
div:before {
content: '...';
position: absolute;
right: 2px;
bottom: 0px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I know you asked for CSS, but you may (or future readers may) not want CSS: it doesn't update when window size changes and it's not a very good nor flexible nor easy method to have "...", I had the same problem that I tried to fix with CSS and I finally use a JS library called dotdotdot.
PS : please do not dislike because it doesn't match all the criteria, I had exactly the same problem and I understood that CSS isn't necessarily the best option (for user experience and developer) so it's important that you know all the option you have.
I have the following markup:
<div>
<a>..</a>
<i>..</i>
<a>..</a>
<i>..</i>
<a>..</a>
<i>..</i>
</div>
Which just shows all the elements horizontally inline on desktops and other screens which are wide enough to hold the content. However when it comes to mobile, the elements wrap across two lines. Is it possible to keep everything on one line and have it be horizontally scrollable?
I've tried:
div {
overflow-x: scroll;
overflow-y: hidden;
}
But that doesn't seem to do anything.
try white-space: nowrap; on your div
div{
white-space: nowrap;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I have this :
<table>
<tr>
<td>
<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<br/>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
<br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<br/>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
<br/>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<br/>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
How can I set the row height? I would like the extra lines to be vertically truncated. I've already try :
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
and it works fine horizontally but not vertically. Do you have any tricks? Sometimes css feels like doing voodoo.
I believe table cells and rows grow to the height of the content that is inside of them. I don't think it would be possible without wrapping the content in your in a div, and then applying styling to limit the size of that div....
Also, it appears as if the line breaks () mess up the word wrapping...
Here is an example: jsFiddle showing text-overflow in td
Here is the code I used:
(html)
<table>
<tr>
<td>
<div class="container-td">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td>
</tr>
(CSS)
.container-td {
height: 100px;
line-height: 100px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
white-space: nowrap;
text-overflow: ellipsis;}