I would like to... well look at the SO answer box. That is behavior what I'm looking for - scrollbar appears on text overflow but user can resize it manually.
My question is, is it possible to do such thing natively with CSS?
With my current setup, initially div is small (less then max-height) and I can resize it but only between current text height and max-height. When more text is inserted and scrollbar appear then I can't change it's size at all.
CSS
element.style {
resize: vertical;
max-height: 200px;
overflow: auto;
padding: 10px;
}
To be more precise I want following to happen:
If height of text is smaller then defined max-height then element sets it's size to minimal value needed for text to be completely visible (without scrollbar). - works
If height of text exceeds defined max-height then element will take max-height and scrollbar will appear. - works
If user don't wont to see scrollbar or simply want to see more text at once, he can resize the element to any desired height and max-height will take that new height as it's value. - don't work, user can't resize over max-height.
It would probably be faster to write JS than writing this question but I would like this have such behavior for static html pages.
Is this the styling you are looking for?
For example:
#element {
resize: vertical;
height: auto;
min-height:200px;
resize: vertical;
overflow: auto;
padding: 10px;
width: 95%;
border:1px solid;
}
<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>
Related
I want to remove the horizontal scrollbar from my webpage. For which
i use overflow-x property
and pseoudo element property webkit-scrollbar in which I write display none.But the problem
still exists sometimes when I shrink my webpage. Like if I write the property over-flow-x:
hidden then on first time shrinking the screen , the horizontal scrollbar doesnot
show but on 2nd time shrinking screen it appears. This is the issue which I am facing. Please give me an appropiate solution as soon as possible.
Thanks.
Use this to hide scrollbar and preserve functionality:
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;=
}
Add this along to remove scroll functionality:
body {
overflow:hidden;
}
Here:
html, body {
overflow-x: hidden;
}
.overflow {
width: 150vw;
}
<div class = 'overflow'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed ipsum in sapien sagittis pulvinar. Cras ornare massa urna, in volutpat quam feugiat sit amet. Sed in purus efficitur justo vestibulum scelerisque. Integer euismod ligula a nisl ornare, vel viverra mi mattis. Mauris dolor diam, tempus a risus in, malesuada fringilla tellus. Vivamus ultrices nisi non massa ultrices mollis at vitae neque. Vivamus viverra fringilla elit, eu suscipit libero dictum nec. Quisque lacinia mattis rutrum.
Aliquam ut dignissim magna. In eget maximus libero. Donec id velit vitae libero ultricies consectetur. Duis in tortor mattis, venenatis elit sit amet, iaculis ligula. Sed pulvinar nisi ut leo sollicitudin tempor. Ut nec erat sed nisl blandit efficitur. Donec varius sem vitae leo tincidunt, sed pretium tortor tempus. Morbi tempor sollicitudin sapien eget sollicitudin. Fusce maximus quis risus ac pretium. Duis non elit nec neque consectetur interdum vitae at lorem. Proin elementum sem justo, non congue orci cursus in. Nulla ac feugiat augue. Cras augue lorem, pretium non velit non, pulvinar accumsan dui.
</div>
If this doesn't work then you will have to post your code for us to fix it.
have you set margin for that? besides your given code is perfect. If you want to remove the scroll bar than view width should be according to the display or to give a width you can use max-width : 100%
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 2 years ago.
I understand the width & height of the visual viewport, as defined by this article, at least on a desktop, is the dimensions of the visible rectangle a user can see when they scroll to the top left of the page.
Why is the background red for, what looks like, the visual viewport when the html's height is 0?
html {
background-color: red;
}
body {
line-height: 20px;
margin: 0px;
}
<html>
<body>
</body>
</html>
A couple of misconceptions here.
First of all, not all CSS properties are inherited in the cascade.
You can look up any CSS property here and then see the formal definition. For instance, here is the formal definition for height:
Initial value: auto
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Computed value: a percentage or auto or the absolute length
Animation type: a length, percentage or calc();
You can see that height is not inherited, and it's default value is auto, whose definition says "The browser will calculate and select a height for the specified element.". When the browser calculates the height of an element, it will make it as small as possible while still fitting all the content inside.
The width property is also not inherited; to understand how width is calculated by default you must know the difference between block elements and inline elements. In short, a "block" element fills its parent's width, while an inline element (like span) takes up its minimum width. Every html tag is naturally either a block or inline element (except some special ones, like form fields, which are "replaced" elements), and you can always make a block element behave like an inline one (or vice-versa) using the CSS display property.
Things get a little less consistent with the root html element. Some browsers have that root element's initial height set to "auto", and some give it an initial minimum height of 100% of the viewport. The body element, however, will consistently have an unset (auto) height. Backgrounds on the html and body elements have an additional subtlety as described here.
Furthermore, the "visual viewport" (as you call it) is a scrolling container, meaning its children can be larger than the container. The scrollbar you see when your HTML is taller than the viewport belongs to the viewport, not to the html element.
You can reproduce this with divs:
.viewport {
height: 50px;
overflow: scroll;
}
<div class="viewport">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie,
semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper. Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit
risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper
nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat. Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo
aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper
diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi. Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor
sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer
nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</div>
</div>
If you want the html element to be exactly the viewport size, with the body element scrolling inside the html element, you can do that with CSS.
You may or may not already know about the "Viewports Units", a measurement unit which can be used in CSS. This allows you to set size and distance measurements based on a percentage of the viewport's height or width. This is very useful for exactly this purpose.
html
{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: scroll;
background: #000;
color: #fff;
}
body {
min-height: 100vh;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
-webkit-line-clamp css not able to add in email template. How can add this property in email template
I have made one video where i have added my needed property of css to inspect element then my desired result will be show then you can understand what i mean. Check this link for video video
It seems that you cannot have that functionality in an email.
Below are two sources with full lists and compatibility of email clients supporting CSS.
I could not find -webkit-line-clamp or line-clamp anywhere.
Here you can see all valid CSS for HTML emails https://caniuse.email/
EDITED:
Also here https://elasticemail.com/supported-css/
EDITED 2:
Maybe you could achieve something like that using overflow: hidden together with a gradient. There is no reason that would not work;
.text-truncate{
width: 300px;
height: 200px;
overflow: hidden;
}
.text-truncate p {
text-align: justify;
}
.text-truncate:after {
content: '';
display: block;
position: absolute;
top: 110px; /* Extra 10px */
height: 100px;
width: inherit;
background-image: linear-gradient( transparent 30%, white 70%);
}
<div class="text-truncate">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius imperdiet dui, nec dictum ante viverra eget. Aenean lobortis bibendum mi eget pulvinar. Mauris eu turpis ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec dolor tempor, aliquam est non, mollis augue. Fusce consequat enim arcu, vitae vulputate metus faucibus ac. Sed nec purus eget quam vulputate fringilla. Vestibulum nec metus est. Nam felis mauris, tincidunt vitae arcu non, vulputate luctus lacus. Pellentesque eget ultricies velit. Duis vehicula, velit eget maximus feugiat, lorem libero egestas turpis, eu ullamcorper nisl neque eget dolor.
Quisque quam orci, scelerisque mollis urna eu, suscipit tristique nunc. Phasellus sit amet sagittis mauris. Cras faucibus auctor quam, nec sollicitudin tellus volutpat id. In sed condimentum massa. Ut eleifend velit purus, et tincidunt dui ornare ac. Aenean finibus enim sit amet leo dignissim, sit amet egestas nibh iaculis. Nam sed lacinia diam, accumsan hendrerit tellus. Suspendisse maximus lobortis ligula quis finibus. Morbi eu libero in velit pellentesque convallis at bibendum lectus. Integer scelerisque, turpis sed sodales sagittis, dui augue cursus sem, ut bibendum tellus odio in leo.
</p>
</div>
Read More
I would like to layout a webpage as sketched in the image:
The main text (a series of div elements) is supposed to go in a main column. I do have occasional images and remarks that relate to the text but with which I don't want to interrupt the actual text flow.
How can I position a given image or "remark" text box to the right of a given div element in the main column?
In the following minimal example, how would I put the img element just to the right of the second div element?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare,
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non.
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt.
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet.
</div>
<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus.
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem
semper non. Phasellus ac augue et purus vulputate suscipit.
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
tortor. Ut vel felis dolor.
</div>
<img src="img.png"/>
The easy way is to add calc width (for example 100% - 100px for 100px wide column right):
.leave-space-form-right {
width: calc(100% - 100px);
float:left;
}
.put-element-on-right {
float:left;
}
Here is an example:
https://jsfiddle.net/txdue3n0/6/
I have a content container that is 500px wide and floated to the right. This container contains text and then an image and then some more text. Ultimately I would like to pull this image out of the bounding 500px container and have it span the full width of the page, which for argument sake is 1000px wide. In effect the images will be full-width (1000px wide) while the content container is only 500px wide. What is the best way to do something like this so that the image can be at full width?
jsfiddle.net/QCb3R/
I would like to pull the image to extend fully outside of the .content div.
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
<img src="http://lorempixel.com/500/300/" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
</div>
</div>
And the CSS:
.container {
width: 1000px;
background-color: #eee;
}
.content {
width: 500px;
float: right;
}
It is quite easy to create that effect, but not by setting the image to be absolutely positioned.
Here's a jsFiddle
.container {
width: 1000px;
background-color: #eee;
}
p {
width: 500px;
float: right;
}
.content {
width: 1000px;
float: right;
}
The problem with setting the image to be absolutely positioned is exactly because it takes the image out of the normal document flow. You would have to fill up the gap left by the original image with a place holder element of the same height, and then position the absolutely positioned image over the top of the place holder element. That sounds like a job for JavaScript as it would require access to the DOM to retrieve the position of elements on the page, that can't be done with CSS and HTML only.