Related
This question already has answers here:
Underline several lines of text + underline to be full width + responsive
(1 answer)
Need to display multiline text with underlining lines of equal length
(5 answers)
Closed 10 months ago.
I'm making hexo blog theme. I'am trying to make line note like style. I want to make css on each line has underline(not like U tag)
want
But if I use border-bottom: 1px solid grey
real
You may also use a gradient to draw a grid below your text.
It has to match the line-height
Here an example with CSS var() to ease the tuning.
p, textarea {
--lineH: 1.6em;
line-height: var(--lineH);
padding:var(--lineH);
padding-block:0;/*reset to set first line right at top */
background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em) 50% 0 / calc(100% - var(--lineH) * 2 ) 100% no-repeat ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>
Added a textarea to the example to show another possible use.
ressources if you need them
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://css-tricks.com/a-complete-guide-to-calc-in-css/
you can use more gradients to mimic a full note sheet https://codepen.io/gc-nomade/pen/bGLGNWB
You can use text-decoration: underline to get that effect (although the text-underline-offset style rule which is used to space the line from thee normal position is NOT supported in IE at all and some other browsers are a bit spotty with it). The only other way to do it is to split the content into spans and apply the border bottom or ::after pseudo-element to each span.
p {
font-size: 14px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
The p tag is a block element. Means if you assign a border the border would be assigned for the block. If you change p tag to an inline element then the border would be displayed like you want.
Update
with inside underlined words
p {
display: inline;
border-bottom: 1px solid grey;
}
p span {
text-decoration: underline;
color: red;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p {
display: inline;
border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
try this :
text-decoration: underline;
text-underline-offset:6px;
Have you tried using the text-decoration-line property.
text-decoration-line: underline;
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line
I have a div that looks roughly like this
<div class="document-teaser" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 7; width: 500px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor sollicitudin magna, ut lacinia nulla accumsan non. Pellentesque nulla risus, pellentesque nec tincidunt nec, commodo quis orci. Suspendisse gravida massa felis. Proin ac nisl id ante vehicula mollis nec a felis. Mauris lobortis tincidunt libero scelerisque faucibus. Morbi tempor nunc a porta pellentesque. Fusce scelerisque diam ac dapibus tristique. Suspendisse finibus maximus nunc, at faucibus lorem commodo nec.</p>
<p>Duis nec nibh feugiat, interdum eros ut, consectetur eros. Praesent eu pretium lectus, eget ornare odio. Duis at sollicitudin augue, at fermentum nibh. Donec ante erat, tristique sed venenatis vitae, suscipit a urna. Maecenas in cursus ipsum, ac fermentum augue. Nulla pretium urna justo, vulputate posuere ante tempor vel. Vestibulum ut ligula congue, gravida ex eget, cursus est.</p>
<p>Donec sed mi faucibus ligula venenatis cursus. Fusce faucibus, arcu vitae sagittis aliquet, dui justo accumsan nisl, eget condimentum lacus velit mattis tellus. Donec sed consectetur urna. In malesuada volutpat augue, quis scelerisque tortor porta quis. Vivamus est metus, vehicula at ultricies ac, ornare vel mi. Donec vel vestibulum ligula. Vivamus sit amet purus odio. Nunc ullamcorper auctor sapien id pellentesque. Phasellus varius ultrices lacinia. Donec a sem ut lacus dignissim bibendum. Cras auctor.</p>
</div>
The styles are added by vue-line-clamp and it works fine on desktop with all viewports.
As soon as I go to my phone, it starts acting up.
The styles are still on the parent, but it is working as if it's applied to all the children. Thus, all p tags get line-clamp to 7, all of them get ellipsis and all have overflow hidden. First of all, this makes all 3 P tags show (which isn't the case on desktop) and it seems like the last two p tags are mushed together so their text is overlapping.
Is the whole webkit box/line-clamp just incompatible with mobile phones or do I need to change something?
For future reference, try also limiting the max-height, in your case for a 7 line clamp, max-height: 8.75 rem might do it, as it did for me. This will also make it work not only on Safari iOS, but also IE, as line-clamp is not supported on IE.
The overflow property didn't hide my overflown content which overflows the width of the element.
HTML
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.</p></section>
CSS
*, *::after, *::before {
box-sizing: border-box;
}
html, body, div, p{
margin: 0;
padding: 0;
}
section{
width: 50%;
background-color: pink;
height: 150px;
}
p{
font-size: 1em;
color: blue;
overflow: hidden;
}
Codepen :: https://codepen.io/StinsonTheNoob/pen/oNbxjWx
If your goal is to not let the <p> start on a new line and rather not overflow, you need to set overflow:hidden to your <section>.
If you want the text to disappear if it exceeds the first line on the right side of the tag then put overflow: hidden; to its parent container which, in your case is the ...
But if you want that text remains inside the container only then you have to make the tag and the "font-size" responsive so that it adapts according to the width and then will not overflow!!!
If you simply don't want any scrolling of the page then kindly put overflow in html or body's CSS commands....
I have the below html.What I am trying to do is center the contents of the p tag.The thing is that if I do a align on the div then it works but when I do it in the p tag it does not.Not good with css and want quick solution so asking u guys for help.
<html>
<head></head>
<body>
<div>
<p align="center" style="width:500px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor neque augue. Mauris a ante et libero tincidunt lacinia. Donec at lorem eu mi sagittis pretium. Donec sed ligula vel nunc placerat auctor quis vitae est. Nullam varius leo sed elit auctor rutrum. Pellentesque at erat quis nibh eleifend tincidunt sed feugiat est. Fusce dolor ante, imperdiet in congue ut, vulputate vitae nisi. Vivamus hendrerit felis a leo laoreet eget mollis purus tempus. Etiam fringilla est lacus. Praesent quis purus sem. Vestibulum interdum scelerisque consectetur. Nam nulla est, lacinia in eleifend eget, ultricies at est. Phasellus congue sollicitudin tellus, sit amet lobortis odio interdum et. Quisque turpis elit, feugiat in laoreet mollis, tempus et leo. Morbi eget viverra enim. Donec nec lacus dolor. Suspendisse tincidunt mi in enim gravida et fringilla lacus ultrices. Integer ac augue at nulla sollicitudin placerat. Morbi et ligula quis mauris consequat egestas vel et sapien. Ut ut justo a augue ullamcorper egestas ullamcorper vel nisl. Cras quam ligula, pharetra at pulvinar et, scelerisque vel erat. Donec scelerisque metus vitae libero accumsan quis suscipit urna pretium. Curabitur imperdiet, turpis a pulvinar adipiscing, nibh felis fringilla felis, nec consequat felis justo accumsan est.</p>
</div>
</body>
</html>
align is a deprecated attribute in HTML 5 .. instead give the <p> an explicit width and add:
margin: 0 auto; to center the entire element (top/bottom 0, left/right auto)
or
text-align: center; to center the elements text
Text is center aligned. I have tested it in latest IE, Chrome and Firefox.
You can try <p style="width:500px; text-align:center">
That's because the property align is meant for divs. Also, it is deprecated, there are better ways to style your paragraphs than that.
Here's a jsFiddle example.
CSS:
div {
width:100%;
}
p {
text-align:center;
}
HTML:
<div>
<p>Hello</p>
</div>
I've just checked your problem, and actually the text is centered in your p tag. I think you are trying to move your p tag in the center of the div,
and you can achieve that by
p
{
margin:0 auto;
}
here is also a fiddle
just an advice: a good practice is to separate your styles from your html, so move all your styling to a separate style sheet.
Try
<p style="width:500px;margin:auto">...</p>
My question is very basic and generic.
I am starting on designing a page(s) using div tags. now I am confuse with two approaches.
should I keep width and height of divs fixed (i.e. fixed with pixels) or
should I keep width and height of divs variable (i.e. using % instead of pixels).
I personally like the first approach where you fix everything and there is very little chance of anything getting disturbed at different screen resolution but the drawback is if screen resolution goes below my expected screen resolution then the scroll bars makes the site look bad(there may be more drawbacks but at present I am not remembering it :) ) , so in that case 2nd approach comes into the picture but the thing is once you start using % for your width and height its very difficult to design the page though once its designed its more stable.
I am confused with the two approaches and need inputs on the above two...
thanks in advance.
You answered your own question. The second approach is better in most of the situations, as it would fit all the screen resolutions nicely. Think of when somebody tries loading your page using a mobile phone, then using percentage will help.
And I don't think using percentage make it harder to design, I even think it's easier. For example, if you want to adjust the main table width to be 1/4 of the screen, now you only need to set width: 25% instead of setting (say) width: 250px; and guess if it works on this size of monitor or different sizes of monitor.
Imagine that you're currently working on a 17" laptop, and the width of your page layout is set fixedly 800px that would fit your screen at the moment. But when you run it on the 24" monitor, that layout will look like a paper on a desk.
With percentage, say, 70% would fit your 17" laptop and also, 24" monitor.
Here is a sample fluid HTML page for you to reference, try to see how it looks with percentages. Note that no matter you minimize the screen, the layout can still adjust. Just simply copy and paste, this is the point of designing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
html, body{
height:100%;
}
/* Backward Compatible for IE6 */
* html #container{
height:100%;
}
/* Top logo and bottom footer */
div#logo, div#footer {
max-width: 90%;
color:#000000; background-color:#ffffff;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Top navigation bar */
div#navbar {
max-width: 90%;
color:#ffffff; background-color:#124a9f;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Container for three lower boxes */
div#container {
max-width: 90%;
height:70%;
color:#000000; background-color:#ffffff;
margin-bottom:10px; margin-left:auto; margin-right:auto;
}
/* Main content (center box) */
div#main {
overflow:auto;
height: 100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#efecf8;
}
/* Full navigation menu (left box) */
div#leftcol {
float:left;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
/* Featured content (right box) */
div#rightcol {
float:right;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
</style>
</head>
<body>
<div id="logo">
Logo
</div>
<div id="navbar">
Navigation Bar
</div>
<div id="container">
<div id="leftcol">Left Column</div>
<div id="rightcol">Right Column</div>
<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
</div>
</div>
<div id="footer">
©2011 Ideal Web Design Co.
</div>
</body>
</html>
It all depends on the layout and design of the website you are creating.
the 2nd approach is used in "fluid" layouts (websites that need to extend and take all the space available to them), otherwise you don't have other notable advantages vs. fixed layouts.
I recommend that you look at the statistics on screen resolutions provided by W3C here:
http://www.w3schools.com/browsers/browsers_display.asp
As you can see, 800x600 is almost gone, so focusing on 1024x768 and up will help.
I don't know how far you are into the learning process, but when you feel like taking a look at what most developers use, I recommend you visit the 960 grid system:
http://960.gs/
That's a question that really depends on what functionality will reside within those divs. If it needs to grow, then percentage is probably warranted. If not, then you should be ok with using px
I guess the 1st approach is better for 99% of the wepapps. You can look Blueprint css framework, is a very easy and clean way to use grid like layouts.