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>
Related
Consider the folowing markup
<div>
<p> text here</p>
</div>
When length of text is small , there is no issue .
When length of text becomes little more , I am able to display the text outside the div with white-space: nowrap CSS property.
However when text becomes huge , some part of the text gets hidden as It moves outside the viewport .Is there a way in which I can display it on the second line when It overflows the whole viewport and not the size of the parent div element.
If you put an inner div around the text within your div you can force that to have width 100vw and set its white-space back to normal.
In this snippet the 'original' (outer) div is given a pink background so you can see its boundaries.
div.outer {
white-space: nowrap;
width: 50%;
background-color: pink;
}
div.inner {
width: 100vw;
white-space: normal;
}
<div class="outer">
<div class="inner">
<p> 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</p>
<p> 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</p>
<p> 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</p>
</div>
</div>
The extra (inner) element is put there to deal with the general case. You might be able to use the p element instead of div.inner - it depends on whether there is other text e.g. outside an inner element in your particular set up.
try
overflow-wrap: break-word;
Or
word-break: break-all;
<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 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;}
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>