I'm trying to achieve a fluid width table where text in the cells isn't allowed to flow onto another line and will use text-overflow:ellipsis when it is too long to fit.
I tried the following test:
HTML:
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat placerat risus. Maecenas lectus orci, commodo id varius ac, vulputate eget elit. Nunc laoreet feugiat aliquet.</td>
</tr>
</table>
CSS:
table { width: 100%; }
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
But as you can see in the fiddle below, the ellipsis doesn't work:
http://jsfiddle.net/p3pXc/
Is there a solution?
Unfortunately, there is now way to have the CSS ellipsis on a dynamic width element.
Adding
display: block;
width: 300px;
for example, will create your ellipsis. But this will not do, in your case.
You will have to fallback on a JavaScript solution, like jquery.ellipsis plugin.
See this question for more information: Insert ellipsis (...) into HTML tag if content too wide
Edit:
Actually, if you just want the column to extend to all the width of the table, without crossing out of the screen (and keeping it only on one line), you should add
table {
width: 100%;
table-layout: fixed;
}
See the updated fiddle: http://jsfiddle.net/7v72L/
(thanks to #CBroe for the suggestion)
Using JavaScript, this problem is solved here, achieving the effect illustrated below:
Related
I've searched for similar questions but none seem to address this specific issue, what I'm trying to do is accomplish something like this:
Label -------------------
-------------------------
-------------------------
where the "Label" is the actual label and the "-" represents my text area, I've tried everything from floats to inline the elements but I just can't figure this out, is there a way to accomplish this without having the label to be absolute therefore hiding the text when the textarea is scrollable?
I Don't know about doing this with a <textarea> without involving JS, But you can always use contenteditable
div[contenteditable] {
border: 2px solid;
font-size: 1.2em;
width: 200px;
height: 200px;
}
[contenteditable]>span {
color: orange;
}
<div contenteditable>
<span contenteditable="false">Label:</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae rhoncus felis, vel auctor tortor. Nunc porttitor arcu eget luctus feugiat.
</div>
There's room for improvements still and require management of course.
This may be a weird one:
I have a page where I don't control the HTML, but I can inject some additional CSS.
I have some tables which I need to align on the page. The problem is that all the other elements are aligned center on the page, but they all have fixed width. For aesthetic reasons I don't want all the tables to be of the same width, I want them to be of variable width depending on the contents.
Notice in the below code how the main container is full width on the page and the other content does not have any other wrapper elements around them. Because of this, all individual items are centered on the page using css. And also because the main container has other full width children (that I have not shown here), I cannot make the container be of reduced width and center it.
*, *:before, *:after {
box-sizing: border-box;
}
.content {
width: 100%;
background-color: #ddd;
}
.content p,
.content span,
.content table {
display: block;
max-width: 300px;
margin-left: auto;
margin-right: auto;
background: #999;
}
<div class=content>
<span>Some content header </span>
<p>Some content which can be long.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac blandit nisi. Curabitur fermentum dui tortor, sed rutrum velit facilisis non. Aliquam erat volutpat. Phasellus egestas erat sapien, ac scelerisque erat rhoncus id. Nullam aliquam libero et aliquam bibendum. Curabitur porttitor lorem in libero molestie, vitae ornare lacus fermentum. Curabitur condimentum tellus fermentum, feugiat nunc dictum, commodo est.</p>
<table class=table1>
<tr>
<td>Test Table 1</td>
</tr>
</table>
<br/>
<table class=table2>
<tr>
<td>Test table 2 which need to have more width than the first one</td>
</tr>
</table>
</div>
What I finally want looks something like this image:
Notice that:
The tables are left aligned with the rest of the items in the page.
The tables are of different width.
Obviously I don't want to hardcode the widths or the left margin for the tables.
Any idea if I can achieve this using just CSS?
Add the following CSS to an outer wrapper on your table:
.wrapper {
display: block;
margin: auto;
max-width: 80%;
}
Add this CSS to your table:
table th, table td {
text-align: left;
}
The CSS above will both center your table to 80% of the screen width as well as left align all text within it.
Update
If you cannot center the wrapper element, use flexbox on the wrapper element instead to center all of the children.
.wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
The CSS above makes it so that any element that is a direct child of the wrapper will be centered, so all elements will be equally centered, including your table. If you want them equally spaced between each other, change justify-content: center; to justify-content: space-between;.
I've read a few solutions with similar titles but none with a solution to this layout.
I have 3 content blocks which all stack beneath each other at most screen widths.
However, when content become overly wide, I want to display a slightly different format.
I want to display the media to the right and the title and text to the left with the text directly beneath the title. It currently sits below the media block (as per the snippet).
anyone know how I can fix it?
.content {
overflow:hidden;
}
.chart {
height: 200px;
width: 200px;
background-color: red;
}
.title, .text {
float:left;
}
.media {
float:right;
}
<div class="content">
<h3 class="title">This is a reasonably long title</h3>
<div class="media">
<div class="chart"></div>
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non urna est. Quisque sed dolor ac ex aliquet aliquet. Integer ornare, velit vitae iaculis faucibus, nulla libero molestie sem, eget placerat augue massa vitae justo.</p>
</div>
There are 2 things you need to do:
1) You need to add a width for your text block, cause now it's 100% and it takes 100% of parent block width - so no floating will be.
2) You need to add to text block a clear property with left value - cause you don't need it to be floated by the headerfrom the left side.
It's all you need to solve the issue:
.text {
clear: left;
width: 50%; /* put your own width (no matter percents or pixels), but it must be less than (parent block width - media width)*/
}
Check here the example: https://codepen.io/fox_hover/pen/8f838b7799db7a3ed4f4d742097440ef
While both previous answers do work to some degree, both fail to fully address the initial question.
The first, requires a change in the order of elements and the second applying a fixed width which was restrictive.
The final solution is in 2 parts so that it works with multiple screen sizes and media queries.
Firstly I changed the order of the elements as per answer 1. This enabled me to achieve the layout required for my 8 column (wide layout). I applied this styling using an 8 column only media query.
For all other screen sizes, I use display flexbox, which allows me to restore the order I require.
Given this simple structure:
<div id="parent">
<div id="child">Lorem ipsum</div>
</div>
with this CSS:
#parent {
width: 200px;
height: 200px;
padding: 20px;
overflow-x: scroll;
}
#child {
width: 500px;
}
Live demo: http://jsfiddle.net/523me/5/
Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.
So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)
Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?
Screenshot 1 - The right padding is ignored. This is how all current browsers behave.
Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)
You're suffering from this problem.
I would solve it by giving a margin to the child (and not a padding to the parent):
body {
padding: 2em;
}
#parent {
width: 200px;
height: 200px;
overflow-x: scroll;
background: gray;
}
#child {
width: 500px;
background: yellow;
margin: 20px;
display: inline-block;
}
<div id="parent">
<div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>
Dunno but adding:
#child{
display: inline-block;
}
Seems to fix it: http://jsfiddle.net/523me/6/
I've only tested in latest Chrome, may not be cross-browser
You might change the padding to a border.
padding: 20px;
to
border: 20px solid gray;
No, the padding is not ignored, but it's still inside the parent.
See updated jsFiddle, where you can see that the padding hasn't moved from its original position.
Edit: Hm, there are some anomalies. If you give the inner div a right margin, that gets ignored too. Hm. Upvoting your question.
Apply padding-right to overflowing element itself, and move background to its direct child element.
<div id="parent">
<div id="child"><div>Lorem ipsum...</div></div>
</div>
<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>
http://jsfiddle.net/523me/9/
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
When I specify overflow-x: hidden on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visible and even just overflow: visible, to no effect.
Am I misunderstanding what these properties do? I would think that overflow-x should not affect the vertical overflow at all.
This has happened on every browser I've tried.
Here's a snippet which demonstrates the effect. I'm using <pre> tags because they're an easy way to create overflowing content, but it seems to happen with any tag.
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="x-hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="y-visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
The W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
But this makes no mention of the case when overflow-x or overflow-y is set to hidden, which to me implies that this combination is indeed meant to be possible.
Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023
It explains why
el {
overflow-x: hidden;
overflow-y: visible;
}
renders as
el {
overflow-x: hidden;
overflow-y: auto;
}
which usually renders the same as
el {
overflow-x: hidden;
overflow-y: scroll;
}
because the auto value of overflow-y is scroll in most browsers.
So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/
Try setting your height. Either make it like 100%, or auto
check this
jsfiddle
height: auto;
Just an hour ago I had the similar problem except the problem occurred when I had specified overflow's value as auto. I didn't use overflow-x or overflow-y, I just needed it to fully contain my two lists that were floating on opposite ends.
What worked for me was that I changed overflow's value to hidden. Try that. I had set the max-width to 100% and instead of specifying height, I just used overflow: hidden.
Hope that helps.
Give this a try:
height: auto;
width: 100px;
overflow: hidden;
Should keep the element at 100px wide, and allow it to expand vertically based on its content (without scrollbars).
Firstly, this fiddle shows the problem which you describe.
As yet, I don't know how to get around this, but it seems like the spec hints to this here:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Just use overflow: hidden on a wrapper div with size constraints. Excuse my formatting in a bit of a rush today.
<!DOCTYPE html>
<html>
<head>
<style>
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>
<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>
See it in action here: http://jsfiddle.net/4PZC9/
Try setting the display property? The overflow declaration works on block level elements!
Maybe you misunderstood something, I didn't unsdertood the question... or the problem is not in the overflow settings.
Overflow: auto will add the scrollbar only if needed (content bigger than container).
Òverflow: visible will add the scrollbar.
Òverflow: hidden will NOT add the scrollbar.
I understand that you want the x-content to be hidden, so overflow-x: hidden, but from your question it seems to me that don't want the vertical scrollbar to see the vertically overflowed content.
Maybe the problem is that is set a fixed height (or max-height) for the container and the content is bigger. Remove the height (or max height) and you'll avoid the vertical scrollbar.
...or as maybe I said, just didn't understood what is the desired effect.
Try this,
height: auto;
overflow:hidden;
Cheers.
Reading you question... I don't see any problem...
Whe I specify overflow-x:hidden; on an element, it adds a vertical scroll bar.
If it overflows in it's height (as you just said it does), then that's quite normal.
I have tried adding overflow-y:visible; and even just overflow:visible, to no effect.
Well... That's normal, as you're telling it to show a vertical scrollbar, wich there already is.
As kuloir said: X = horizontal; Y = vertical.