Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How to create such a fading text effect before text is restricted:
in pure css.
I would prefer to append the style into a box below the fading text.
Shall I operate on border box or other element? Any piece of code compatible with all browsers highly appreciated.
Here you go. You can make it using ::after element with position: absolute;, and it will overlap text in a container.
With this CSS you can add .short-box to any block and it will receive your desired gradient fade.
.short-box {
/* if you want to hide a part of text */
height: 150px;
overflow: hidden;
/* for :after to follow the paretn position */
position: relative;
}
.short-box::after {
content: '';
position: absolute;
width: 100%;
height: 50px; /* here you can use `%` instead of `px`, so this block height will depends on parent height */
bottom: 0;
left: 0;
z-index: 2;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
<div class="short-box">
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. 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
This question already has an answer here:
fixed position header overlapping
(1 answer)
Closed 3 years ago.
Ok so first things first. I have a navigation bar at the top of my page, and I've set it's position property to fixed so that it stays on screen all the time.
The problem is that as soon as i did that the div below it shifted upwards going underneeth the nav element.
I have searched about this topic and found only solutions that involved setting the position property of the above div as relative. But doing so the navigation bar doesn't stay there, it moves with the rest of the page when scrolling down.
This is the code:
* {
padding: 0;
margin: 0;
}
.nav-bar {
position: fixed;
overflow: hidden;
width: 90%;
height: 30px;
background: #006666;
z-index: 1;
color: #fff;
}
.content {
position: relative;
background: #aaa;
color: #fff;
}
<body>
<nav class="nav-bar">Navigation bar</nav>
<div class="content">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. 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. 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. 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>
</body>
I've tried different combinations of positions of both elements but none of them worked as i wanted.
Here is the fiddle: https://jsfiddle.net/e1nbxj8v/
Add padding-top:30px of .content
.content {
position: relative;
background: #aaa;
color: #fff;
padding-top:30px;
}
https://jsfiddle.net/lalji1051/yafeu1x7/
Have you consider adding margin-top: 30px; to content and nav making top: 0; ?
https://jsfiddle.net/dv7pyh92/1/
I recommend you rather use a very simple CSS grid:
grid-template-rows: 30px calc(100vh - 30px);
* {
padding: 0;
margin: 0;
}
.nav-bar {
width: 90%;
height: 100%;
background: #006666;
color: #fff;
}
.content {
background: #aaa;
color: #fff;
height: 100%;
overflow: auto;
}
body {
display: grid;
grid-template-rows: 30px calc(100vh - 30px);
}
<body>
<nav class="nav-bar">Navigation bar</nav>
<div class="content">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. 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. 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. 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>
</body>
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 in some div long text and I would like to display only 3 lines from the text and when somebody click on the "read more", the whole text should be shown.
How to make this "read more" option in html/css?
One method would be to set the div's height to be three times its line-height, and set overflow: hidden.
You can then change its height to "auto" in the event handler for displaying the rest of the content:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('#content').style.height= 'auto';
this.style.display= 'none';
});
body {
font: 14px verdana;
}
#content {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: 200px;
}
<div id="content">
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>
<button>Read more</button>
You could also do this completely in CSS by using an adjacent sibling selector:
body {
font: 14px verdana;
}
#content {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: 200px;
}
#more:checked + div {
height: auto;
}
<label>
<input id="more" type="checkbox">Read more
<div id="content">
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>
</label>
You can do this by first setting the height of the box to a specific size and keep the overflow hidden. Then use a button and js event to handle this .
<div id = "content">
your test will come here.
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.
<button type="button"
onclick ="document.getElementById('content').style.height='auto'">
Read more
</button>
</div>
Your css file should contain this.
#content {
overflow: hidden;
height: 3em;
line-height: 1em;
}
I was looking for read-more-possibility made only by html and css, too. The best idea for me was that with the adjacent sibling selector.
I changed what you read above in a certain way. First there is normal text. That stops at a senseful point, not counting the lines. Sometimes it can be one line, sometimes 4. After that I can expand it.
In css I wrote the first part, the second in html
body {
font: 20px verdana;
}
.content {
overflow: hidden;
height: 0em;
line-height: 1.2em;
width: 100%;
}
.more:checked + div {
height: auto;
}
<label>
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.<br>
Read more? Click at the box. <input class="more" type="checkbox">
<div class="content">
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.<br>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>
</label>
I have studied 5 SO questions but they all talk about how to do it.
One question also talked about why background have special behavior on body and html tags.
But my question is: Why fixed attachment makes the gradient to appear on entire page?
I mean, lets take a 200 x 200 px image as a background. It will remain fixed even when we scroll the page. (assuming background-attachment: fixed; property is applied).
But when we add gradient as a background on body tag, it stretches to entire page. Now I have studied that gradients are supposed to work like that. OK I understand. But it does not appear on entire page when background-attachment: fixed; is not specified. It repeats instead.
Why does background-attachment: fixed makes the gradient to stretch on entire page? This doesn't happen when we use a plain image.
So my question is: why this behavior comes when we apply background-attachment: fixed property?
The ONLY behavior which should come is that the gradient should remain fixed. That's it. Because that's what the use of this property.
<style>
body
{
background: linear-gradient(skyblue, orange);
background-attachment: fixed;
}
</style>
When you say:
"...But when we add gradient as a background on body tag, it stretches
to entire page. Now I have studied that gradients are supposed to work
like that. ..."
You are wrong. Gradients are not supposed to work like that. A gradient is just a background-image. That's it. They behave like background images because they are background images.
The reason, you see that behaviour is not because they are supposed to work like that. The reason the work like that is because they are images. But, you haven't defined the size explicitly. So, without an explicit size, they can't have an intrinsic size. Which is why they match size of the element they are in.
From this Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
.. Like any other gradient, a CSS linear gradient is not a CSS
color but an image with no intrinsic dimensions; that is, it has
neither natural or preferred size, nor ratio. Its concrete size will
match the one of the element it applies to...
In order to achieve what you want, you need to apply all properties relating to background-image. Specifically, the background-size, background-position. Once that is done, you need to define your gradient.
Demo Fiddle: http://jsfiddle.net/abhitalks/comsxw8m/
Snippet with relevant CSS:
body {
background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
background-repeat: no-repeat;
background-size: 120px 120px;
background-position: top center;
background-attachment: fixed;
}
<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>
Example 2:
See this fiddle: http://jsfiddle.net/abhitalks/comsxw8m/1/
Here the gradient is applied to body with a fixed size and is repeated. Another gradient is applied to a div which is fixed. Hope now you get the idea clearer.
Snippet 2:
body {
background-image: linear-gradient(to bottom, #fff 0%, #0ff 100%);
background-repeat: repeat;
background-size: 64px 64px;
}
div {
width: 240px; height: 240px;
margin: 32px auto;
overflow: auto;
background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
background-repeat: no-repeat;
background-size: 120px 120px;
background-position: center center;
background-attachment: fixed;
}
<div><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>
the following HTML code has a sample used from example 6 given on http://css-tricks.com/examples/CSSTabs/
<head>
<style type="text/css">
.tabview { min-height: 250px; position: relative; width: 100%; }
.tabview > div { display: inline; }
.tabview > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.tabview > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }
.tabview > div:target > a { background: white; }
.tabview > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }
.tabview > div:not(:target) > div { position: absolute }
.tabview > div:target > div { position: absolute; z-index: -1; }
</style>
</head>
<body>
<div class="tabview">
<div id="tab1">
Tab 1
<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.
"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.
"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.
"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.
"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.
"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.
"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.
"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>
</div>
<div id="tab2">
Tab 2
<div>2. One might well argue, that...</div>
</div>
<div id="tab3">
Tab 3
<div>3. One might well argue, that...</div>
</div>
</div>
</body>
The problem is, when there's lot of text in any tab, it's end part is not hidden when you switch to another tab.
For example, in the code given above - the end contents of Tab1 can be seen even when you switch to other tabs.
In another worse case, if more tabs have lot of text - then the contents overlap.
How can this be solved?
One way to solve this is to increase min-height in the tabview class.
But in my application the tab contents are generated in real-time (from some web service), and I don't have idea about their size.
Note: The code works only in non-IE browser
Just add
.tabview > div > div
{
overflow: auto;
}
Solves both the problems. The end text is no longer visible and even with a lot of content, it does not overlap.
Fiddle
If you're using this on an actual website, you definitely don't want to use this pure CSS solution. Beyond the fact that it won't work properly in IE, the fact that your page moves when you switch tabs is really going to be a turnoff to your visitors.
If you were to try and make this work in IE, you'd have to rely on a Javascript solution. If you're already relying on a Javascript solution to fix the tabs, you might as well use javascript to power your tabs.
Please, check out jQuery UI Tabs. A much, much better solution.