In my <p> tag I have some text, and it's broken on many lines.
<p>
some really long text broken in many places...
</p>
Normal behavior is not to show space character on line break, but in my application I need to show it, is it possible in any way ?
EDIT:
If You run this:
<p style="width:100px;">
<span style="background-color: #008000">
some long text bla bla bla bla bla bla bla
</span>
</p>
You can see, that space (" ") between words, appears like any other character, but there is no space on the end of each line.
Your answer can be found in the css white-space property. This should be your HTML:
<p style="width:100px;">
<span style="background:#008000;">some long text bla bla bla bla bla bla bla</span>
</p>
And your CSS should be:
span {
white-space: pre-wrap;
}
One problem with white-space:pre-wrap; though, is that it also includes all tabs you may use in your HTML formatting. So you can't indent the text inside the <span> tags.
Take a look at this fiddle I made: jsfiddle.net/jWbgW/
Of course, you should really put all your style definitions in the css, but that's a given.
The space character is not actually displayed at the end of a line. If you set white-space: pre on the span element, then its content will be displayed as is, preserving the division into lines as well as multiple or end-of-line spaces. To have just some individual space(s) at ends of lines displayed (in the sense that they occupy space and get background color), you can use no-break spaces, representable as &nsbsp;.
But if you would like to have text wrapped as usual, then I’m afraid there is no simple way to make browsers append such a “visible space” at the ends of lines.
You can use <br /> for new line or margin/padding in CSS.
<p>
some really long text broken in many places...
<br />
</p>
To add a line break in HTML between different paragraph sections you can wrap each section in <P></P> tags, use a <BR />, or use CSS padding-bottom attribute. When you use each of these really depends on the situation.
Here's a good article that offers some good explanation: http://www.newbiewebsitedesign.com/html-line-break-tag-cod
p { white-space:nowrap;}
<p>This text will be not broken on many lines...</p>
Check this out too: http://www.impressivewebs.com/css-white-space/
Related
I'm after a regex code to highlight/extract everything inside the div tag include the closing match tag itself.
The problem is I'd like to extract a div tag with some specific information in its angle bracket ">"
For example, after filtering the results will show something like:
<div class="abc" id= "123">
bla bla bla
</div>
<div class="def" id = "456">
bla bla bla
</div>
<div class="hit" id = "789">
bla bla bla
</div>
Could anyone suggest how to extract/hightlight the matching regex in VSCode editor? I've installed the maching bracket plugin but when seaching for the tag it did not show the matching one.
Thank you very much
It is a 2 step process
search the div open tag with the right attributes, assume that the attributes are always in the same order and is the whitespace different.<div class="[a-f]*?" id="2\d\d">search all occurences (Alt+L from find dialog)
Press Right Arrow. Cursors are now right after the div-open tag
Use command Emmet: Balance (outward)
A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break <br>. I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:
br + code {
background-color: yellow;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.
The problem with example B is that there is plaintext content in between the line break <br> and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.
Example C is an HTML way of fixing this issue. I added an empty <span> in between the <br> and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the <br>.
But I would prefer a CSS-side fix to this issue. What is it, if any?
Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:
Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.
The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with <span style="font-size: 12px">. If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.
This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the <p> and <br> tag. Here is a great SO post talking about semantics and their importance.
TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:
.highlighted {
background-color: yellow;
}
<p>Your first paragraph</p>
<p>A second paragraph without the linebreak</p>
<code class="highlighted">... code that is highlighted ...</code>
<p>A third paragraph</p>
<code>... this code isn't highlighted ...</code>
Why you don't put all element that you need to change background to
<div style="background-color: yellow;">
<br>
<p>
</div>
Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:
br + code {
background-color: yellow;
}
h2:nth-child(3) + p code:nth-child(3) {
background-color: inherit;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
I have a requirement where I have to eliminate <br> tags enclosed in <p> tags whenever they are not preceded with text or followed with text, let me give a complete example.
Asterisk (*) tags are meant to be matched, the others are meant to be left untouched.
<div>
<p>
<br/>*
<span>Text1</span>
<br/>
<i>Text2
</i>
</p>
<p>
<b>
<i>
<br/>*
</i>
</b>
<span>Text3</span>
<br/>
<br/>
Text4
<i>
<br/>*
</i>
</p>
<p>
<span>Text4</span>
<br/>*
</p>
</div>
Putting things simple, I need to normalize the text formatting from some Word documents where the editors were doing line-breaks act like paragraphs, line-breaks are meant to break text and not imply spacing between lines, this is the paragraph's job.
So, all I need is to keep <br/> tags surrounded by text safe and match the rest to issue a delete.
Thanks!
You could use two queries:
//p/descendant-or-self::*/*[1 ]/self::br[not(preceding-sibling::node()/normalize-space()!='')]
//p/descendant-or-self::*/*[last()]/self::br[not(following-sibling::node()/normalize-space()!='')]
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)
I have always used either a <br /> or a <div/> tag when something more advanced was necessary.
Is use of the <p/> tag still encouraged?
Modern HTML semantics are:
Use <p></p> to contain a paragraph of text in a document.
Use <br /> to indicate a line break inside a paragraph (i.e. a new line without the paragraph block margins or padding).
Use <div></div> to contain a piece of application UI that happens to have block layout.
Don't use <div /> or <p /> on their own. Those tags are meant to contain content. They appear to work as paragraph breaks only because when the browser sees them, and it "helpfully" closes the current block tag before opening the empty one.
A <p> tag wraps around something, unlike an <input/> tag, which is a singular item. Therefore, there isn't a reason to use a <p/> tag..
I've been told that im using <br /> when i should use <p /> instead. – maxp 49 secs ago
If you need to use <p> tags, I suggest wrapping the entire paragraph inside a <p> tag, which will give you a line break at the end of a paragraph. But I don't suggest just substituting something like <p/> for <br/>
<p> tags are for paragraphs and signifying the end of a paragraph. <br/> tags are for line breaks. If you need a new line then use a <br/> tag. If you need a new paragraph, then use a <p> tag.
Paragraph is a paragraph, and break is a break.
A <p> is like a regular Return in Microsoft Office Word.
A <br> is like a soft return, Shift + Return in Office Word.
The first one sets all paragraph settings/styles, and the second one barely breaks a line of text.
Yes, <p> elements are encouraged and won't get deprecated any time soon.
A <p> signifies a paragraph. It should be used only to wrap a paragraph of text.
It is more appropriate to use the <p> tag for this as opposed to <div>, because this is semantically correct and expected for things such as screen readers, etc.
Using <p /> has never been encouraged:
From XHTML HTML Compatibility Guidelines
C.3. Element Minimization and Empty Element Content
Given an empty instance of an element whose content model is not
EMPTY (for example, an empty title or
paragraph) do not use the minimized
form (e.g. use <p> </p> and not <p />).
From the HTML 4.01 Specification:
We discourage authors from using empty P elements. User agents should ignore empty P elements.
While they are syntactically correct, empty p elements serve no real purpose and should be avoided.
The HTML DTD does not prohibit you from using an empty <p> (a <p> element may contain PCDATA including the empty string), but it doesn't make much sense to have an empty paragraph.
Use it for what? All tags have their own little purpose in life, but no tag should be used for everything. Find out what you are trying to make, and then decide on what tag fits that idea best:
If it is a paragraph of text, or at least a few lines, then wrap it in <p></p>
If you need a line break between two lines of text, then use <br />
If you need to wrap many other elements in one element, then use the <div></div> tags.
The <p> tag defines a paragraph. There's no reason for an empty paragraph.
For any practical purpose, you don’t need to add the </p> into your markup. But if there is a string XHTML adheration requirement, then you would probably need to close all your markup tags, including <p>. Some XHTML analyzer would report this as an error.