I know there are a lot of "similar" issues here on stackoverflow, but none to answer my dilemma.
The code is like this:
------------CSS--------------
pre{
white-space : pre-wrap;
line-height:75%;
}
-----------HTML--------------
<pre>Some text<br>
second line of text<br>
third line<br>
some longer text that will get wrapped on another line</pre>
I got the text from a database, so I cannot use li or other things...but I must keep the formatting (space indentations, line breaks, everything as it was saved in DB). The problem is that <br> line break is taller than text-wrap line break (which takes its value from css). Any way to control both of them? As I understand, <br> inherits its height value... but I don't from where it inherits that. From the current text, from a parent, from a browser-default setting?
Just remove the <br> tags and keep the line breaks. The pre tag will break the lines where there are line break characters in the text:
<pre>Some text
second line of text
third line
some longer text that will get wrapped on another line
</pre>
Or hide the br tags using CSS:
pre br { display: none; }
To answer your last question: the <br> tag's height (or more accurately, line-height) is inherited from it's parent.
Here is a fiddle as an example: http://jsfiddle.net/ivandurst/7afUZ/
Additionally, you can set the <br> line-height directly, but any value 1em or less won't affect it unfortunately:
br {line-height: 1.5em}
Related
The text for the site that I'm working renders as paragraphs with internal lines separated by <br> tags. When a single line runs longer than the container div width and wraps, how can I indent the text that wraps?
I've tried using margin-left and text-indent on the <p> tag, but of course, that just indents everything after the first line of the paragraph, which is not what I'm after.
<p>
Assuming that a containing div width is 27 characters, this line would wrap after the word 'containing', meaning that I'd like indentation for any new line created by wrapping within this sentence.
<br>
Then the start of this line should be aligned with 'Assuming' above, and the following lines created by wrapping (if any) should also be indented.
</p>
<p>This is a paragraph</p>
becomes
This is a paragraph
but I want it to remain as is. Like
This is a paragraph
How do I do it?
If you don't want to use , you can use something like
<p class="allspace">This is a paragraph</p>
.allspace { white-space: pre }
white-space:pre will format the html with spaces. This approach is better as it doesn't require multiple use of
Use:
<p>This is a paragraph</p>
& nbsp ;
Alternatively referred to as a fixed space or hard space, Non-Breaking
SPace (NBSP) is used in programming, and word processing to create a
space in a line that cannot be broken by word wrap.
Use - it is a non-breakable space.
For example:
<p>This is a paragraph</p>
A non-breaking space (also called no-break space, non-breakable space (NBSP), hard space, or fixed space) is a space character that prevents an automatic line break at its position. In some formats, including HTML, it also prevents consecutive whitespace characters from collapsing into a single space.
Use . For example:
Hello World
Instead you can use <pre> tag. This tag is used for indicating preformatted text. The code tag surrounds the code being marked up.
Browsers normally render pre text in a fixed-pitched font, with whitespace in tact, and without word wrap.
<pre>hello world</pre>
I am coding an MVC 5 view, and I am after some text colored green, the same as the class="text-success" Bootstrap class on the same line as normal text.
Here is what I have coded currently:
Test Text: <p class="text-success">Yes</p>
This however, displays the green "Yes" on the next line down rather than on the same line as the "Test Text:".
How can I display the text on one line?
That should do the trick :
<p>Test Text: <span class="text-success">Yes</span></p>
Explanation :
<p> is a block element, hence displaying in its block taking the whole width (if not specified otherwise in the CSS), with a new line before and after.
<span> is an inline element, taking only the width that's needed and not forcing any new line.
The difference between inline and block is a very important thing in HTML/CSS. You will also discover other values for the css display property, a very usefull one being inline-block that puts together some benefits of block and some others from inline.
You can use CSS to change the way <p> is displayed. The normal mode is block; changing to inline will prevent the line break.
p.text-success {
display: inline;
}
Test Text:
<p class="text-success">Yes</p>
The fix of this issue is simple: just use <span> instead of <p>:
Test Text: <span class="text-success">Yes</span>
The reason behind this is, that the the tag <p> is defined as paragraph and causes a line break automatically (if definition was not changed through CSS).
The <span> tag instead is a simple text span and does not cause a line break.
Additionally you can also add <nobr> around it, to force to browser to not make a line break (no br stands for no line break):
<nobr>Test Text: <span class="text-success">Yes</span></nobr>
I have a document like this:
This is some text.<br>
This is some more text.<br>
This is yet some more text.
This renders like this:
This is some text.
This is some more text.
This is yet some more text.
Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:
This is some text.
This is some more text.
This is yet some more text.
This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.
How can I adjust the amount of space between lines where <br> appears?
It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.
br {}
The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be
<!-- HTML -->
<br/>
The page will have this styling
height: auto;
line-height: normal;
max-height: none;
min-height: 0px;
The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.
<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>
I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.
The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break
between words. In effect, the element is replaced by a line break.
Future versions of CSS may handle added and replaced content, but
CSS1-based formatters must treat ‘BR’ specially.
- Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements
An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..
// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.
Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well
You could potentially also find the pseudo-selector ::first-line useful.
Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.
<div style="line-height:50px;"><br></div>
Yes you can...like by using line-height in css
.test{
line-height:40px;
}
Demo
You can use padding-top also
Demo2
Is there any way purely with CSS (or 'proper' markup) to style the 2nd line of a paragraph when the text wraps to a second line? A well placed <br /> would do it, but I don't believe that's good markup or SEO.
Specifically, say I have a paragraph that is 2 lines long. I would like the 2nd line to have a wider width than the first line. So the paragraph is a little "pyramid-like". But I don't want to use anything that's not a proper way to do this just for beauty's sake.
Example:
<p>I am a very long
sentence where my second line is longer.</p>
You can use the :first-line pseudo-element:
See: http://jsfiddle.net/X33pY/ - resize the window to make a second line in the first paragraph.
p:first-line {
color: red
}
p {
color: blue
}
Just in case, this might be what you're after:
http://jsfiddle.net/qKRh8/
p {
white-space: pre
}
You can use the :first-line pseudo-class to style the first line and, by implication, the second line will fall back to the default styling.
See:
http://www.w3.org/TR/CSS2/selector.html#pseudo-elements