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
Related
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>
Here's some example HTML and CSS to show the problem:
<p>thisssssssssssss issssssssss a test</p>
<p>thisssssssssssss <span>isssssssssss another</span> test</p>
<p>thisssssssssssss <button>isssssssssss another</button> test</p>
button { display: inline; }
Try it out on this JSFiddle, by resizing the output area.
Result (in Chromium on Ubuntu):
As you can see, there is a line break before the <button> in the third example, which I am trying to avoid. The character seems as if it is being ignored (treated as a regular space). The desired result is that there is no break between "this" and "is," just like the first two examples.
I've already found Why do inline-blocks break after non-breaking space?. An answer there suggests using <nobr> or white-space: nowrap. However:
I'm setting the <button> to display: inline, so I don't even understand why the problem exists anymore since it's an inline element.
I need a pure CSS solution, without any extra HTML in the text before the button. My HTML has to look something like this:
<p>{{SOME TEXT}} <button>foo</button></p>
and I don't know whether the {{SOME TEXT}} will contain spaces or not. I can add extra HTML around the text, but the solution linked in the answer above requires adding an element within the text itself.
Why is the problem happening even when setting display: inline;, and how can I solve it without modifying the text itself?
Can you put a span before the nbsp?
<p>thisssssssssssss<span id="b"> <button>isssssssssss anotherrrrrrrrr</button></span> test</p>
#b {
white-space: nowrap;
}
http://jsfiddle.net/bggk33du/10/
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
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}
I want to attach a Font Awesome icon to the last word in a text string:
foo bar●
But if a line wrap is required, I want the icon to attach to the last word and have them wrap together:
foo
bar●
My problem is very similar to:
Prevent :after element from wrapping to next line
However, the solution assumes I have access to the last word. In my case, the text will be generated dynamically. Is there a css/html-only way to ensure the icon wraps with the last word?
Here's a jsfiddle.
I just wanted to point out why the change that #Unmocked provided actually works, and it has to do with the difference between display: inline and display: inline-block.
To explain, here's a little background on the difference between block display and inline display.
Block Display
block elements, in general, are elements which cause layout. They receive their own bounding box, and have the ability to push other elements around to some degree in order to fit into the space available within the browser's rendering area. Examples of block items include: h1, p, ul, and table. Note that each of these items, by default, starts a new line and also ends its own line when closed. In other words - they fit into a block of text by creating their own paragraph-level section.
Inline Display
inline elements, in general, are displayed in-line with the text. In other words, they are designed to display with-in the line of text. Examples include i, b, or span. Note that each of these items, by default, continues with the flow of its surrounding text, without forcing a newline before or after itself.
Enter the mid-way case...
Inline-Block Display
inline-block is a hybrid of the above two. In essence, an inline-block element starts wherever its preceding text leaves off, and attempts to fit into the flow of the document inline. However, if it reaches a point where it needs to wrap, it will drop to a new line, as if it were a block element. Subsequent text will then continue immediately following the inline-block element, and continue wrapping as normal. This can lead to some strange situations.
Here is an example, to show what I mean. To see it in action, check out this cssdesk snippet.
In your example, you were setting the :after pseudo-element to be display: inline-block - which meant that when it happened to extend past the right-most boundary of the wrapping display, it acted like the light-blue text in the example - and wrapped, as a block. When you instead change the :after element to display: inline, it causes it to act just like any other text - and without whitespace between it and the preceding letters, the word-wrap acts as you wanted it to.
I hope this helps!
Note: The other thing which changed between your original fiddle and the updated one is the elimination of white-space around the text.
In the first fiddle, your HTML looks like:
<div class="container2">
foo bar
</div>
While the browser doesn't display the spaces before and after the text, it does contain the spaces, and when the :after element is rendered, it is as if this is happening:
<div class="container2"> foo bar :after</div>
The browser compresses the multiple spaces into single spaces, but still puts a space between the word "bar" and the :after element. Just like a space between any other words, this will cause the wrap to occur after "bar" but before :after at a certain width.
In the second fiddle, you are using:
<div class="container-wide">foo bar</div>
<div class="container-narrow">foo bar</div>
In this case, because there are no spaces trailing the "foo bar" strings, the browser renders the :after element displayed immediately following the end of the content string. It is as if this is happening:
<div class="container-narrow">foo bar:after</div>
No break in inline-rendered text means no break.
For an example demonstrating this, please see this update to your jsFiddle.
Interestingly enough, I found you only need to change one line of code for this to work.
Testing on your .container2 element in jsFiddle, change this
.container2:after {
font-family: FontAwesome;
content: "\f111";
display: inline-block;
}
to
.container2:after {
font-family: FontAwesome;
content: "\f111";
display: inline;
}
It seems to work with any width I set the container to and will stay connected to what ever foo will be.
You can use negative margin the width of the icon and css transform. Here a fiddle how to do :
.container {
width: 50px;
}
.icon-circle {
background:black;
height:10px;
width:10px;
display: inline-block;
margin-left:5px;
}
.ANSWER{
display:block;
padding-right:15px; /* width of the icon */
}
.ANSWER .icon-circle{
margin-left:-10px;
transform:translate(15px);
}
<h4>What we want</h4>
<div class="this-is-how-it-should-wrap">
foo bar<i class="icon-circle"></i>
</div>
<div style="margin-top:25px"></div>
<h4>What happenned</h4>
<div class="container NORMAL">
foo bar<i class="icon-circle"></i>
</div>
<div style="margin-top:25px"></div>
<h3>The answer</h3>
<div class="container ANSWER">
foo bar<i class="icon-circle"></i>
</div>
Have a nice day!