This seems like a common CSS question, but for some reason I cannot find the answer to it.
consider the following Code:
<div style="width:50px;border:1px solid #000">
THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
<br/>
2nd line
<br/>
3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line
<br/>
last line
</div>
With CSS ONLY I want to add vertical space between the <br/> tags.
line-height works for the entire content, and attaching CSS to <br> (i.e: br{ margin:10px 0}), doesn't seem to work either (in Chrome at least), so I am wondering if this is even possible.
Thank you.
jsfiddle
br
{
content: " " !important;
display: block !important;
margin:30px;
}
try this
You can try this, works on chrome too, content: " " does the trick for chrome, else is happy with margins
Demo
HTML
<div>
THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
<br/>
2nd line
<br/>
3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line
<br/>
last line
</div>
CSS
div{
width:150px;
border:1px solid #000;
padding:5px;
}
br {
content: " ";
display: block;
margin: 10px;
}
Yes its possible. There are several issues related that you need to understand.
1) You're using margins. Sometimes margins will be collapsed or removed depending on content. Have you tried using padding instead? You will get different results. I don't have any direct links off hand but google around and make sure you understand the important differences between margins and padding.
2) Learn about the box-models. If you don't know about box-model: border-box, then you need to go study it. Chris Coyier of css-tricks.com has an article on it. I'm pointing it out because its directly pertinent to issues like this one.
3) display:block I don't know for certain but I think probably defaults to display: inline. You can any element it and always make it act like a standard block DIV if you set display: block as one of the properties. Again, Chris Coyier has some great information on this. Please make sure you have a deep appreciation of display: rules and their caveats.
Just adding display: block and either using margins or padding will fix your problem. If it doesn't, there's something stupid simply I'm missing. I've done this type of thing before. In fact, I've completely removed tags from Wordpress theme markups using display: none to completely reformat image gallery outputs.
Related
I know that a newline in html between elements is treated as space, but I think this is pretty scary when you try to play with responsive layout.
For example, here we have the expected and correct behaviour, but to obtain it I had to remove the newline in the html between the element:
https://jsfiddle.net/xew2szfu/1/
<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
Here I wrote the html with a newline, as you normally do, and everything got broken:
https://jsfiddle.net/rL1fqwkc/1/
<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
I know I can fix the problem with a float: left, but I wonder if I missed something, the default behaviour sounds really incorrect to me.
It is happening because inline-block puts a space in between elements, and with the space the second div moves down, since it can't fit on the line any more.
There are many ways to combat this. As you said, float is one of them. This excellent CSS Tricks article is a great help, but I'll go over the ones you probably want:
Negative margin:
nav a {
display: inline-block;
margin-right: -4px;
}
Very simple, you can have a nice html format, but moves the element over to hide the space.
Set the font-size to 0:
.recommend-friend__slider{
font-size: 0;
}
.recommend-friend__dialog {
font-size: 12pt;
}
Or, my personal favorite, skip the inline block and use flexbox instead.
I have a problem with "text-indent" using css, What i want is, have paragraph with 3 or more lines, with in that i want to apply the "text-indent" style for first two lines and remaining lines will become to normal alignment. I have tried using CSS but i couldn't get the expected result, so can anyone help me in this. Thanks in advance.
You could use a pseudo element with float:left to achieve this
p:before
{
content: '';
display:inline-block;
width: 20px;
height: 30px; /* however much you need for 2 lines */
float:left;
}
FIDDLE
text-indent is used to apply space before each paragraph. So if you want to have space for the first two lines, you could either split them in two paragraphs or to encapsulate the lines in another element (div/span) and apply margin-left or padding-left, depending on what you're looking for.
<p class="indent">This is the first line.</br>
This is the second Line
<p/>
<p>Those are other header or text or p or something else</p>
CSS
.indent {
text-indent:50px;
}
This may help:
<html>
<dl>
<dt>Hanging Indents in CSS and HTML</dt>
<dd><p>This article describes how you can create hanging indents on your web pages using CSS and HTML.</p></dd>
<dd><p>This is second line of hanging index</p></dd>
<p>This is normal text line 3.</p>
</html>
for demo: http://www.compileonline.com/try_html5_online.php
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
Is it possible with CSS(3) to visually/textually highlight line breaks, which were automatically inserted by browsers? Something like ↻ at the end of each wrapped line.
With sourcecode it's important to see where lines were wrapped, since newlines can be significant. Letting the user scroll horizontally isn't a good idea neither …
As far as I know, there is only way to do this using pure CSS, via the :first-line pseudo-element
Concept
Add a "visual indication" to every element, by default.
Select every :first-line element, to reset the styles.
Demo: http://jsfiddle.net/djpTw/
<code>
<div class="line">Too much code at one line. Learn to write shorter lines!</div>
<div class="line">Lonely line.</div>
...
</code>
CSS:
code {display: block; width: 150px;} /* <-- Not interesting, just for testing*/
code .line { color: red; /* Visual indication */ }
code .line:first-line { color: #000; /* Default color */ }
The demo is rendered as (black by default, red as "visual indication"):
Sadly, this is not possible in pure CSS. I suspect you might be able to fake it using a tall thin graphic attached to the bottom right with no glyph in the bottom and then glyphs proceeding up as far as your tallest reasonable run-on, with the glyph spacing carefully coordinated to your line-height.
http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)