I simply want all of my p elements to be the length of the text in it. It works if I put .intro p at inline-block, but I would like my p elements all to be displayed underneath each other. Is there a way to do this?
HTML:
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p>
<p>hsdqjkf kjdsh</p>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p>
</div>
CSS:
.intro {
margin-top: 80px;
color: #ffffff;
text-align: center;
}
.intro p {
margin-bottom: 12px;
padding: 6px 12px;
background: #25d6a2;
}
Just add br tag after each p element
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p><br>
<p>hsdqjkf kjdsh</p><br>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p><br>
</div>
Demo
If you don't want to add <br /> in the DOM or for some reason you cannot modify your HTML, you can simulate line break using CSS :after pseudo with content property having an value of \a and white-space set to pre
As far as the explanation goes for \a, its an hexadecimal value for line feed which is equivalent to 10.
p:after {
content:"\a";
white-space: pre;
}
Demo
In a sense, you want to eat your cake and keep it: make the p elements inline elements as far as box formatting is considered (in this case, for the purpose of setting background behind the text only) but block elements in the sense of starting on a fresh line.
There are various methods and tricks, but perhaps the simplest one is to use floating (instead of display: inline-block): float the elements to the left but also clear floating, so that no real floating takes place—you just want the side effect of floating, the effect of making the element just as wide as its content requires:
.intro p {
float: left;
clear: both;
}
In addition, you need to set clear: both on the element after the intro.
Related
I have a div with content like this:
<div class="myDiv">
Here's some text that vary in length <span class="separator">/</span> Some other text <_other elements etc>
</div>
What I want is, only using CSS, to display the first text and hide the rest.
I have tried .myDiv *:not(:first-child) { display: none; } which hides all elements, except the first separator. All texts are still visible.
Is this even possible, only using CSS?
Edit: the text is in variable lenght, but this variation is restricted between 14 and 21 chars. It will never be line breaked. (Added this info for solutions like set the div to a width and visibility:hidden or solutions like that which is fully acceptable)
This is how I would do it:
<div class="myDiv"><span>Here's some text that vary in length</span> <span class="separator">/<span><span> Some other text </span><span><_other elements etc></span>
</div>
.myDiv > span:not(:first-child) {
display:none;
}
Here is the JSFiddle demo
Separate your text using span properly and then apply the css to hide the spans if its not the first-child
It is not possible to directly select text nodes using CSS so the logical way of achieving this would be to wrap the text in an element and hide that. Unfortunately, this is not an option in this instance as the HTML markup cannot be modified and JavaScript cannot be used.
Luckily, we can rely on two things:
The text will always be on one line
The .separator element will exist
We can therefore use a combination of overflow on .myDiv and a pseudo element in .separator to forcibly hide the unwanted text:
Add height: 1em; and line-height: 1em; to .myDiv to force it only to show one line of text
Add overflow: hidden; to .mDiv to ensure that the overflown content is hidden
Create an :after pseudo element in .separator and set it to display: block; to ensure that it is forced onto a new line. This will ensure that the separator itself (/) is still shown
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator:after {
content:"";
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
If the separator is not required the CSS can be simplified. The pseudo element can be removed and .separator itself can be set to display: block; to force it onto a new line.
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator {
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
Edited You can Use this also
.myDiv{
max-width: 28.5ch;
overflow: hidden;
white-space: nowrap;
}
OR
<style>
.myDiv *:first-child
{
display:none;
}
</style>
<div class="myDiv">Here's some text that vary in length <span class="separator"> Some other text <_other elements etc></span>
Cant seem to find how to remove vertical space between two text elements, There are some similar problems on this website but doesn't seem to actually work.
HTML Code:
<p>this website is</p> <h1>Encrypted</h1>
it seems that I would have to use a position code, but when I use a position code that lets other elements get close to it, the text gets pushed to another spot on the website
Remove white space between elements using CSS:
Horizontal being (top and bottom space)
h1, p {
margin-top: 0;
margin-bottom: 0;
line-height: /* adjust to tweak wierd fonts */;
}
Vertical being (left and right space)
.parent {
font-size: 0;
line-height: 0;
}
h1, p {
font-size: 12px;
margin: 0;
display: inline-block;
}
JSFIDDLE
Every browser has pre-set styles for elements. p and header tags have margins set. You can change this by using margin: 0;: JS Fiddle
You may also benefit from using a CSS Reset to avoid these issues.
Also, I don't imagine a scenario where the word "encrypted" in your code should be using an <h1> tag: How to properly use h1
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
I'm trying to create an effect where h# elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.
Take this example HTML5 and CSS3:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="content-container">
<h1>Short title</h1>
<h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
</div>
</body>
</html>
h1 {
font-weight: bold;
text-align: center;
}
h1:before {
content: '— ';
}
h1:after {
content: ' —';
}
This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.
How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This jsFiddle depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.
I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.
I can't see a way of doing this with text bullet points, but it can be done with background images. CSS3 supports multiple background images and multiple image positions, so we can position an image bullet point at either end of the h1 like so:
Replace your CSS with this:
body {text-align:center}
h1 {
font-weight: bold;
padding: 0 16px;
background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
background-position: left center, right center;
background-repeat: no-repeat;
display: inline-block;
}
The padding is required to make room for the bullet points. I have used some random bullet point image, but note that I have specified it twice. I can then specify different positions for these two images; one left and one right of the h1. Finally display:inline-block prevents the h1 filling the entire width, which would cause the bullet points to constantly sit at the edges of the parent element instead of at the edges of the heading text.
Hope this works for you.
I managed to get quite close with creative use of table display styling:
h1 {
font-weight: bold;
text-align: center;
display: table;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
h1:before {
vertical-align: middle;
content: '—';
display: table-cell;
padding-right: '1em';
}
h1:after {
vertical-align: middle;
content: '—';
display: table-cell;
padding-left: '1em';
}
Why just "quite close"? Well, firstly I haven't verified that this is standard-mandated behaviour and not just some quirk of rendering. Secondly, it works in Chrome 18 and Firefox 12, but I haven't bothered to check in Internet Explorer or Safari — and I know it doesn't work quite right in the Android browser engine.
I have seen a question here about the same, but I can't get any of the answers to work (at least on Chrome).
This question is only for <br>, I know plenty of other techniques to change the height but in this case I can't change the HTML.
bla<BR><BR>bla<BR>bla<BR><BR>bla
CSS:
br {
display: block;
margin-bottom: 2px;
font-size:2px;
line-height: 2px;
}
Desired effect: smaller inter-line height.
The only thing I can get to work is display:none, but then all line break are removed.
Here's a fiddle for it using some of the techniques, but see that it renders the exact same as without any CSS.
This feels very hacky, but in chrome 41 on ubuntu I can make a <br> slightly stylable:
br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
}
I control the spacing with the font size.
Update
I made some test cases to see how the response changes as browsers update.
*{outline: 1px solid hotpink;}
div {
display: inline-block;
width: 10rem;
margin-top: 0;
vertical-align: top;
}
h2 {
display: block;
height: 3rem;
margin-top:0;
}
.old br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
outline: red;
}
.just-font br {
content: "";
display: block;
font-size: 200%;
}
.just-margin br {
content: "";
display: block;
margin: 2em;
}
.brbr br {
content: "";
display: block;
font-size: 100%;
height: 1em;
outline: red;
display: block;
}
<div class="raw">
<h2>Raw <code>br</code>rrrrs</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="old">
<h2>margin & font size</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="just-font">
<h2>only font size</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="just-margin">
<h2>only margin</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="brbr">
<h2><code>br</code>others vs only <code>br</code>s</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
They all have their own version of strange behaviour. Other than the browser default, only the last one respects the difference between one and two brs.
You can't change the height of the br tag itself, as it's not an element that takes up space in the page. It's just an instruction to create a new line.
You can change the line height using the line-height style. That will change the distance between the text blocks that you have separated by empty lines, but natually also the distance between lines in a text block.
For completeness: Text blocks in HTML is usually done using the p tag around text blocks. That way you can control the line height inside the p tag, and also the spacing between the p tags.
Take a look at the line-height property. Trying to style the <br> tag is not the answer.
Example:
<p id="single-spaced">
This<br> text
<br> is
<br> single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
This<br> text
<br> is
<br> double-spaced.
</p>
The line height of the br tag can be different from the line height of the rest of the text inside a paragraph text by setting font-size for br tag.
Example: br { font-size: 200%; }
Use the content property and style that content. Content behavior is then adjusted using pseudo elements. Pseudo elements ::before and ::after both work in Mac Safari 10.0.3.
Here element br content is used as the element anchor for element br::after content. Element br is where br spacing can be styled. br::after is the place where br::after content can be displayed and styled. Looks pretty, but not a 2px <br>.
br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
The br element line-height property is ignored. If negative values are applied to either or both selectors to give vertical 'lift' to br tags in display, then correct vertical spacing occurs, but display incrementally indents display content following each br tag. The indent is exactly equal to the amount that lift varies from actual typographic line-height. If you guess the right lift, there is no indent but a single pile-up line exactly equal to raw glyph height, jammed between previous and following lines.
Further, a trailing br tag will cause the following html display tag to inherit the br:after content styling. Also, pseudo elements cause <br> <br> to be interpreted as a single <br>. While pseudo-class br:active causes each <br> to be interpreted separately. Finally, using br:active ignores pseudo element br:after and all br:active styling. So, all that's required is this:
br:active { }
which is no help for creating a 2px high <br> display. And here the pseudo class :active is ignored!
br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
This is a partial solution only. Pseudo class and pseudo element may provide solution, if tweaked. This may be part of CSS solution. (I only have Safari, try it in other browsers.)
Learn web development: pseudo classes and pseudo elements
Pay attention to global elements - BR at Mozilla.org
You can control the <br> height if you put it inside a height limited div. Try:
<div style="height:2px;"><br></div>
As the 'margin' doesn't work in Chrome, that's why I used 'border' instead.
br {
display: block;
content: "";
border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
#-moz-document url-prefix() {
br {
margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome/Safari.
}
}
The BR is anything but 'extra-special': it is still a valid XML tag that you can give attributes to. For example, you don't have to encase it with a span to change the line-height, rather you can apply the line height directly to the element.
You could do it with inline CSS:
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!
Notice how two line breaks were used instead of one. This is because of how CSS inline elements work. Unfourtunately, the most awesome css feature possible (the lh unit) is still not there yet with any browser compatibility as of 2019. Thus, I have to use JavaScript for the demo below.
addEventListener("load", function(document, getComputedStyle){"use strict";
var allShowLineHeights = document.getElementsByClassName("show-lh");
for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
allShowLineHeights[i].textContent = getComputedStyle(
allShowLineHeights[i]
).lineHeight;
}
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});
.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}
This is a small line
<span class="show-lh r"></span><br /><span class="show-lh r"></span>
break. Whereas, this is a BIG line
<span class="show-lh g"></span><br /><span class="show-lh g"></span>
<span class="show-lh b"></span><br style="line-height:40vh"/><span class="show-lh b"></span>
break!
You can even use any CSS selectors you want like ID's and classes.
#biglinebreakid {
line-height: 450%;
// 9x the normal height of a line break!
}
.biglinebreakclass {
line-height: 1em;
// you could even use calc!
}
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!
You can find our more about line-height at the W3C docs.
Basically, BR tags are not some void in world of CSS styling: they still can be styled. However, I would recommend only using line-height to style BR tags. They were never intended to be anything more than a line-break, and as such they might not always work as expected when using them as something else. Observe how even after applying tons of visual effects, the line break is still invisible:
#paddedlinebreak {
display: block;
width: 6em;
height: 6em;
background: orange;
line-height: calc(6em + 100%);
outline: 1px solid red;
border: 1px solid green;
}
<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<br id="paddedlinebreak" />
break.
</div>
A work-around for things such as margins and paddings is to instead style a span with a br in it like so.
#paddedlinebreak {
background: orange;
line-height: calc(6em + 100%);
padding: 3em;
}
<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<span id="paddedlinebreak"><br /></span>
break.
</div>
Notice how the orange blob above is the span that contains the br.
#biglinebreakid {
line-height: 450%;
// 9x the normal height of a line break!
}
.biglinebreakclass {
line-height: 1em;
// you could even use calc!
}
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!
You can write br tag as show
<br style="content:''; padding: 10px 0;" />
Change padding value to 10px to anything you like.
Note: As padding is specified, height increases in both directions(top and bottom)
The line height of the <br> can be different from the line height of the rest of the text inside a <p>. You can control the line height of your <br> tags independently of the rest of the text by enclosing two of them in a <span> that is styled. Use the line-height css property, as others have suggested.
<p class="normalLineHeight">
Lots of text here which will display on several lines with normal line height if you put it in a narrow container...
<span class="customLineHeight"><br><br></span>
After a custom break, this text will again display on several lines with normal line height...
</p>
<font size="4"> <font color="#ffe680">something here</font><br>
I was trying all these methods but most didn't work properly for me, eventually I accidentally did this and it works great, it works on chrome and safari (the only things I tested on). Replace the colour code thing with your background colour code and the text will be invisible. you can also adjust the font size to make the line break bigger or smaller depending on your desire. It is really simple.