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
Related
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
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.
I have two lines that have space between them. Like the one below....
<h2> Something Something <h2>
<h4> Something here too </h4>
I want it to look like this:
<h2> Something Something <h2>
<h4> Something here too </h4>
The space is shown in the browser. I used the tags just to make it clear.
How to reduce the space within the orange rectangle ?
First, ensure that padding and margin on your header elements is 0.
After that, you can adjust their line-height values to get the amount of space you like. Example: http://jsbin.com/afivoq/4/edit
Another option for you! You can apply a negative margin-top on header elements which follow other header elements, like so:
h2 + h4 { margin-top: -20px; }
See the jsbin for updated example.
I'd set all padding and margins to 0.
h4, h2 { padding:0; margin:0; }
This is an oversimplification of your code most likely but it'll get the job done.
Add it in your css:
h2{
margin-bottom: 10px; //something smaller
}
h4 {
margin-top: 10px; //Whatever you like
}
Your second <h2> isn't a close tag </h2> so your adding an extra H2 element. Also take a look at this example with Firebug installed. Firebug has a feature called Layout which will show you where the space is coming from:
Resetting your margin and padding for the header tags like everyone else is saying is a great start. The best advice I can give someone who is learning CSS is to get chrome.
Right-click the element you want to change and hit "Inspect element." On the right hand side, you can alter the CSS on the fly. Then you can copy and paste the results into your application. Chrome also has the ability to save your CSS code.
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 :)