I'd like to set the textarea's rows and cols attributes via CSS.
How would I do this in CSS?
<textarea rows="4" cols="50"></textarea>
It is equivalent to:
textarea {
height: 4em;
width: 50em;
}
where 1em is equivalent to the current font size, thus make the text area 50 chars wide.
see here.
width and height are used when going the css route.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>
I don't think you can. I always go with height and width.
textarea{
width:400px;
height:100px;
}
the nice thing about doing it the CSS way is that you can completely style it up. Now you can add things like:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
As far as I know, you can't.
Besides, that isnt what CSS is for anyway. CSS is for styling and HTML is for markup.
I just wanted to post a demo using calc() for setting rows/height, since no one did.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}
<p>height is 2 rows by default</p>
<textarea>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.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">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.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">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.</textarea>
If you use large values for the paddings (e.g. greater than 0.5em), you'll start to see the text that overflows the content(-box) area, and that might lead you to think that the height is not exactly x rows (that you set), but it is. To understand what's going on, you might want to check out The box model and box-sizing pages.
Related
When I hover over the anchor tag, it flickers. It's because there are vertical gaps between the lines of the wrapped anchor tag. Moreover, if I happen to click between the lines, the link doesn't activate. I would like to get rid of this flickering and vertical hover gaps that cause it. The rest of the layout including apparent line height and button position (on the same line as the last word of the anchor tag) should stay the same.
I was thinking about this for a couple of days with no luck. The best alternative I have is using inline-block on the anchor tag, but that clears the button to the next line, which wastes too much space.
body {
line-height: 1.5;
width: 300px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
<a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</a>
<button>click</button>
</p>
<p>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>
Added:
a {
padding: 4px 0;
}
It'll give the a element an extra space from top and bottom, and it doesn't affect the gaps.
body {
line-height: 1.5;
width: 300px;
}
a {
text-decoration: none;
padding: 4px 0;
}
a:hover {
text-decoration: underline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
<a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</a>
<button>click</button>
</p>
<p>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>
I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here:
Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?
But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something.
I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...
I used div#floater to represent the image, has same effect.
HTML:
<div id="outer">
<div id="floater">
</div>
<div id="inner">
<h1>Title1</h1>
<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>
<h1>Title2</h1>
<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>
<h1>Title3</h1>
<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>
And the CSS code:
#outer{
position: relative;
font-size: 10pt;
width: 100vw;
min-height: 88vh;
column-count: 3;
column-gap: 1vw;
padding-top: 54vw;
background-color: red;
}
#outer #floater{
position: absolute;
right: 0;
top: 0;
width: 66vw;
height: 50vw;
margin-bottom: 2vw;
display: block;
border: 2px solid blue;
}
#outer #inner{
max-width: 100vw;
background-color: green;
margin-top: -11vw;
}
I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions?
https://jsfiddle.net/20drzb3k/5/
You can give a try to backface-visibilty to cure that visual bug.
#outer #inner > *{
backface-visibility:hidden;
}
https://jsfiddle.net/20drzb3k/7/
For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ
What is the best way to truncate text(or line clamp) on a specific row?
Lets say I have a paragraph with 8 lines of text but I only want to show 3?
Is this possible via CSS or do I need something else?
Set line-height, and max-height as multiple for n rows you want to show. For example, if line-height is 30px, only show 2 lines:
HTML
<p class="text">
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>
CSS
.text {
line-height: 30px;
max-height: 60px;
overflow: hidden;
}
Example: https://jsfiddle.net/rk8y0rsd/
Yes, it is simple, look the example bellow.
html:
<div class="i-speak-too-much">
Hello I like speak, I live in the future I am the Universe
</div>
css:
.i-speak-too-much {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; //making dots
}
jsfiddle: https://jsfiddle.net/ot9excbr/
Hi I am trying to format my web paragraphs so that the text is justified and the last line is centered. I found the CSS property "text-align-last" which allows me to specify the alignment for the last line.
The problem is that this property is not supported by Chrome and Safari (yet...?).
Anyone have an alternative or a trick to do that?
The W3C manual: http://www.w3schools.com/cssref/css3_pr_text-align-last.asp
Thanks
I don't think it's possible in CSS alone.
Here's a JavaScript solution, in which a clone lies behind the element. The element has text-align: justify and the clone has text-align: center.
The code then reduces the height of the original element so that only the clone's last line displays.
var p= document.getElementById('lorem'),
clone= document.createElement('p');
clone.textContent= p.textContent;
clone.className= 'clone';
p.parentNode.insertBefore(clone, p);
p.style.height= p.offsetHeight - 14 + 'px';
#lorem, .clone {
position: absolute;
line-height: 14px;
font: 14px arial;
width: 500px;
}
#lorem {
text-align: justify;
overflow: hidden;
background: white;
}
.clone {
text-align: center;
}
<p id="lorem">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>
I've got my footer with four columns inside a container. It needs to be inside the container to line up with the content above.
My problem is I want the left column to have a background of red, however currently it will not stretch because it's obviously in a container.
How can I stretch it full width to the left whilst keeping it lined up with the content above.
<footer class="cf">
<div class="container">
<div class="test11" style="width: 25%; float: left; background: red;">
<p>
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.
</p>
</div>
<div class="test11" style="width: 25%; float: left;">
<p>
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.
</p>
</div>
<div class="test11" style="width: 25%; float: left;">
<p>
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.
</p>
</div>
<div class="test11" style="width: 25%; float: left;">
<p>
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.
</p>
</div>
</div>
</footer>
.container {
width: 1170px;
margin: 0 auto;
}
footer {
background: grey;
}
You cannot do it directly like you said "stretch" it as far as I know.
However, I made a little workaround for you here
It consists of:
using pseudo-element :before (assigned to the first footer column using :nth-of-type(1)) which we'll use for creating same red background to place on the left of the first column
positioning the :before element to position: absolute; in order to use left: 0; which will place the red background on the left edge of last positioned element
now our :before element is positioned relatively to the closest positioned ancestor - which is in our case the html element itself. But we want it to be positioned relatively to the footer which is not positioned yet, we do so using position: relative; on it (more on that here)
adding content: " "; height: 100%; width: 25%; so it appears actually
adding z-index: -1; to which places the before element behind the actual element. Read about it here
adding z-index: 0; to the footer element to include it to the positioning context
adding background-color: red;
final added code:
footer{
z-index: 0;
position: relative;
}
.test11:nth-of-type(1):before{
position: absolute;
left: 0;
content: " ";
height: 100%;
width: 25%;
z-index: -1;
background-color: red;
}
Few tips:
Don't use inline styles. Just don't
Use cf class to wrap just the floated elements (not e.g. footer containig them in your case)
For your future questions, it would be great, if you'd provided all the relating code, so people who want to help you could reproduce (and eventually find the solution) it as quickly as possible. (I had to include clearfix to css)
Hope this helps. Good luck!
Set container class width to 100%
.container {
width: 100%;
margin: 0 auto;
}