Fiddle here: https://jsfiddle.net/sgbotsford/d52zyp0t/72/
Where does the extra first line indent come from in the <li> using => :before content?
Here's the problem. Circumstances beyond my control put paragraph tags inside list elements. When I use a :before, with a negative left, it works -- it sits out in the margin just like I want. But the text-indent is increased where I've used the :before. Where does this extra indent come from?
The desired behaviour is to have paragraphs and list items to be styled identically, except for the => floating off the left margin.
I'm sure I can eventually experiment enough to hack a solution, but right now I am trying to understand this behaviour in terms of the box model.
One answer suggested removing the text-indent tag from <p> This results in a flush <p> and a smaller indent on <li>
HTML
<html>
<head>
</head>
<body>
<div class=content>
<p>This is a paragraph. It has several sentences. It goes on and on and on and on. It has several sentences. It goes on and on and on and on. </p>
<ul class="c">
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification. It looks a lot like a paragraph.</p></li>
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification.</p></li>
</ul>
<ul class="b">
<li><p>This is a list element that is styled using ::before and outdenting the content. Where does the extra space come from? </p></li>
<li><p>This is a list element that is long enough to wrap, I think.</p></li>
</ul>
</div>
</body>
</html>
CSS
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-indent: 1rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -2.5rem;
}
Hi Can you please check it's really helpfull for you I just Remove p
tag text-indent and change ul.b li p::before left position Add
text-indent in ul.b li p element
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
padding: 5px;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -10px;
}
ul.b li p {
text-indent: -22px;
}
.bluetable {
background-color: #9FF;
border: 2px solid black;
}
td {
margin: 14rem;
border: 1px dashed green;
}
Related
I have a list component with a custom bullet defined as a before pseudoelement:
li:before {
display: inline-flex;
width: .8rem;
height: .8rem;
margin-right: 1.5rem;
margin-left: -2.9rem;
background-color: #00c878;
border-radius: .375rem;
content: "";
}
It all works fine as long as the li content doesn't overflow the container. Then, the whole content just jumps down a few pixels and leaves a weird top margin between the bullet and the content.
I have recreated it here.
I have managed to make it disappear using work-break: break-all, but that is of course not a susteinable solution.
Any tips?
So many solutions. but this one worked best
Please Set position to absolute on the pseudo element and remove margin. My solution uses positioning to get wrapped lines automatically line up correctly.
Advantages:
very compact code
works with any font size (no absolute pixel values contained)
aligns rows perfectly (no slight shift between first line and following lines)
.container {
width:170px;
border:1px solid red;
}
ul {
margin: 0;
padding: 0;
}
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position:relative;
word-break: break-all;
}
li::before {
width: 4px;
height: 4px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
left: 10px;
top: 9px;
}
<div class="container">
<div class="list unordered">
<h3 class="text-grey-150 h5 "> Branchen ETFs </h3>
<ul class="">
<li>Technologie ETF
<br>
</li>
<li style="/* word-break: break-all; */">Finanzdienstleistungen ETF</li>
<li>Gesundheitswesen ETF
<br>
</li>
<li>Immobilien ETF
<br>
</li>
<li>Industrie ETF</li>
</ul>
</div>
</div>
When doing custom pseudo-elements it's better to position them absolute and relative to the li. See example below, this has fixed your issue:
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position: relative;
}
li::before {
display: inline-flex;
width: 4px;
height: 4px;
margin-right: 15px;
margin-left: -29px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
top: 9px;
}
You can use top and left properties to re-position as per your needs.
With the following markup, is it possible (and how) to achieve a wrapping like shown in the preview?
Markup
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
CSS
.filled-box {
width: 80px;
height: 80px;
position: absolute;
overflow: hidden;
}
.filled-box h2,
.filled-box p {
display: inline;
overflow-wrap: break-word;
font-size: 20px;
margin: 0;
padding: 0;
}
Preview
Hi there I am
just a text w
ith some word
s, that want
to fill the e
ntire space
If there is a solution it of course may use CSS3 Syntax.
word-break: break-all; is what you are looking for probably. Devil is in the details.
Your initial markup has an h2 tag with a p tag and but your preview shows that they are all inline. h2and p tags are not inline elements.
And thus, making them display: inline is not the ideal thing to do, instead use inline elements, like span and others.
Another thing to notice here is that word-break: break-all; doesn't works properly on your inline elements. Just use the tags what they were made for and tweak the values according to our prefs.
.filled-box {
width: 85px;
position: absolute;
}
.filled-box p span{
word-break: break-all;
font-size: 16px;
margin: 0;
padding: 0;
}
.filled-box p {
word-break: break-all;
font-size: 16px;
margin: 0;
padding: 0;
}
<div class="filled-box">
<p><span>Hi there</span> I am just a text with some words, that want to fill the entire space</p>
</div>
You can use word break property of css. Simply add
word-break: break-all;
It will automatically fill up the entire width and wrap the overflown text.
Also, replace the h2 tag as it is a block element
make the h2 float and inherit font-size :
.filled-box {
width: 85px;
position: absolute;
word-break: break-all;
font-size: 16px;/* or whatever */
margin: 0;
padding: 0;
}
.filled-box * {
margin: 0;/*reset*/
}
.filled-box h2 {
float: left;
font-size: inherit;
padding-right: 0.2em;
font-weight: normal; /*whatever*/
color:rgb(51, 170, 255) /* whatever*/
}
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
or use display:contents, but not supported everywhere unfortunatelly here:
.filled-box {
width: 85px;
position: absolute;
word-break: break-all;
font-size: 16px;/* or whatever */
margin: 0;
padding: 0;
}
.filled-box * {
display:contents;
}
.filled-box h2 {
font-size: inherit;
padding-right: 0.2em;
font-weight: normal; /*whatever*/
color:rgb(51, 170, 255) /* whatever*/
}
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
The display value to used should be run-in supported once in Chrome :
.filled-box {
width: 85px;
position: absolute;
word-break: break-all;
font-size: 16px;
/* or whatever */
margin: 0;
padding: 0;
}
.filled-box * {
margin: 0/* reset*/
}
.filled-box h2 {
display: run-in;
font-size: inherit;
padding-right: 0.2em;
font-weight: normal;
/*whatever*/
color: rgb(51, 170, 255)/* whatever*/
}
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
But it just doesn't work for many reason, see: https://css-tricks.com/run-in/
I have a basic website and I'm stylizing html with css. I put two paragraphs next to each other and they appear on the same line, although separately as two centered pieces.
For example:
<p>ugh</p>
<p>yay</p>
would show up in the website like
ugh yay
instead of
ugh
yay
The CSS I have for the paragraphs are:
p {
text-align: center;
color: black;
display: block;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
NOTE TO EVERYONE: REMOVING INLINE-BLOCK DID NOT FIX IT
FULL CODE CSS: https://jsfiddle.net/sprot9uh/
p {
background: yellowgreen;
text-align: center;
color: black;
display: block;
font-size: 20px;
margin-top: 0;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.inline {
display: inline-block;
margin-right: 20px;
background: yellow;
}
<p class="inline">I'm an inline block element....
</p>
<p class="inline"> me too
</p>
<p> But I'm a block level element
</p>
<p>Me too
</p>
remove inline-block for p
p {
text-align: center;
color: black;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
That's what the inline-block does in your css. You can either completely remove it or just use block.
add display:block in (p) tag instead of display:inline-block; and u can remove display-inline-block it's also worked...
<p> elements are display: block; by default. Usually all you need is:
p {
margin-bottom: 10px;
font-size: 20px;
color: black;
}
The default display property of p tag is 'block' so you can remove the display property.
You can refer the jsfiddle link
p {
text-align: center;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
Looking into your css code I think you have paragraphs <P></P> in <section></section> something like:
<section>
<p>123</p>
<p>456</p>
</section>
You have to change css for section (flex-direction from row to column):
section {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: column;
}
I am having an issue that I hope someone will be able to help me out with.
I have and h2 element that i have given a width, so that long headlines break into two lines. I then want to add a border-bottom to the text, not the block element, and so i have wrapped the text inside the h2 element in a span that i apply the border to. Like this:
<h2><span>My headline that breaks into two lines</span><h2>
My css is like this:
h2 {
width: 455px;
height:170px;
text-align: center;
font-size: 67px;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 span {
border-bottom: 2px solid blue;
}
Everything about works fine, EXCEPT i can't get my border to get any closer to the text. No matter what values i put in line-height and padding, the border seems to be stuck about the 30px below the text. Does anyone have any clever thoughts as to what I can do? I feel like I have tried every combination possible.
Thank you very much in advance.
html :
<div class="demo">
<h2>
<span>My headline that breaks into two lines</span>
</h2>
</div>
css:
.demo {
width: 455px;
height:170px;
text-align: center;
}
h2 {
border-bottom: 1px solid red;
display : inline;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 > span {
font-size: 67px;
line-height: normal;
}
demo http://codepen.io/gauravsam/pen/PZQwNz
add padding-bottom:10px; demo
h2 {
width: 455px;
height:170px;
text-align: center;
font-size: 67px;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 span {
border-bottom: 2px solid blue;
padding-bottom:10px;/*add this*/
}
in my example you will see that by making line-height on the h2 relative, the span rests just under the descender (e.g. the letter y), is the border now closer to the baseline than you had it?
h2 {
text-align: left;
width: 400px;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
line-height: inherit;
}
span {
border-bottom: 2px solid blue;
}
I am creating a div for meta data that has a line going through the back of it and for some reason, space is being added to the beginning of the line and I'm not sure why.
Here is the CSS:
.mline {
border-top: 1px solid #E7E7E7;
height: 0px;
margin: 20px 0 20px 0;
text-align: center;
}
.mline > div {
background-color: #FFFFFF;
line-height: 30px;
padding: 0 5px 0 5px;
position: relative;
text-transform: lowercase;
top: -16px;
}
.mline * {
display: inline-block;
}
.mline h1 {
font-size: 12px;
font-weight: normal;
}
.info {
line-height: 16px;
}
.info li:after {
content:" \2022 ";
}
.info li:last-child:after {
content:"";
}
.liked, .like:hover {
color: red !important;
}
And here's the HTML:
<section>
<div class="mline">
<div>
<ul class="info">
<li>3/5/13</li>
<li>21 notes</li>
<li>reblog</li>
</ul>
</div>
</div>
</section>
You can see the error on my site here: http://nellyswritingroom.tumblr.com/
And in this jsfiddle: http://jsfiddle.net/xrVh4/1/
I'm not sure what's going on because it's definitely not margins or padding. Any help would be greatly appreciated!
In the jsfiddle example, I assume left padding is being added by default to the ul.info element.
The site, however, has the following lines in newstyle.css:
ul, ol {
margin-left: 2em;
}
If you don't want any margins or padding, you can clear them with:
.info {
line-height: 16px; // already there - I'm not adding this
margin: 0;
padding: 0;
}
Example
It seems that it is, in fact, padding, on the ul element; adding the following CSS declaration removes that space:
.info {
padding-left: 0;
/* other stuff unchanged */
}
JS Fiddle demo.
The line is the border-top you have applied. The reason it all can't be seen is because you have covered it with a negative top with the child element, that has a bg color fff