How can I make padding apply to wrapped text with CSS? - css

I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?

What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>

You should change .header-text display to either block or inline-block

you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}

May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}

Related

I want the css background color of text to be a block but have padding all around even when line is broken [duplicate]

I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?
What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
You should change .header-text display to either block or inline-block
you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}
May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}

Moving a tag to the top of a todo bar

The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>

Materialize divier with text in the middle

Hi to all out there familiar with materialize.
I would like to make the divider:
<div class="divider"></div>
Look similar to this:
It is basically the divier with text in the middle.
Does anyone have a solution? If not with material divier even with other html and css would be fine
Thanks
I am a fan of wrapping the text with a div with a fixed height. Then position: relative the text inside the div. See the snippet below.
.wrapper {
background-color: black;
height: 1px;
margin: 32px 0 0;
text-align: center;
}
span {
position: relative;
top: -8px;
padding: 0 15px;
font-weight: 500;
border-radius: 4px;
text-transform: uppercase;
font-size: 1em;
color: #000000;
background: #ffffff;
}
<div class="wrapper">
<span>OR</span>
</div>

strech two lines to same length?

I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?
You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>
You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>

Where has my text gone?

On my site, I was expecting to find the text in the snippet below, centered, on top of the image of the musicians.
<div class="brand">
<h1>Looking for a musician at short notice?</h1>
<div class="line-spacer"></div>
<p><span>We can help</span></p>
</div>
It's currently not displaying. I think it's a z-index issue, but I'm not sure of the solution.
Any ideas?
EDIT
Relevant CSS:
#intro .brand
{
margin-top: 40px;
}
.line-spacer
{
width: 20%;
margin:0 auto;
margin-top: 20px;
margin-bottom: 25px;
border-bottom:1px solid #fff;
}
h1
{
font-size: 36px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
color: #3a3a3a;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
Remove overflow from #intro
#intro {
overflow-y: hidden;
}
you have issue with both positioning and z-index
As of now it is position below the artists image and not above it, and since it is behind layers of other displays no text can be seen!
Try reducing the top-margin and adding z-index:1

Resources