I noticed the neat property of text which is nested inside a code tag - it adapts to its containing div, which means it automatically breaks into a new line if the screen size is reduced, so I wanted to recreate its properties in a class and apply this class to <span> that would basically behave the same as a <code> tag. However, I didn't manage to fully mimic its behaviour, so I temporarily solved the problem regarding the styling of my product by wrapping my text with a <code> tag anyway and changing the font its size.
I've been searching all over the internet and I cannot find the source code for the styling which affects text encapsulated inside a <code> tag and would very much appreciate if someone, who has found (or created) what I couldn't, could post the css properties of a class that needs to be added to a <span> for its text to behave exactly the same as if it was inside a a <code> tag.
You can mimic the whitespace bevaviour of code or pre with this CSS definition:
.codestyle {
white-space: pre;
}
Related
I have an html-document that is generated by an application. I want to indent everything in this document except the h2 headers. I've been playing around with the css :not selector but I can't quite get it to work the way I want.
Here is the css that I came up with and the jsfiddle that I've been using for testing: http://jsfiddle.net/xm71wr2a/
body :not(h2){
margin-left: 20px
}
As you can see in the jsfiddle the p and the div are properly indented but the text between them is not. Is it possible to apply the indentation to that as well, or do I have to modify the html to achieve this? I have access to the application's source code so I can edit the output that it generates but I'd rather solve this using css if possible.
Well you should give the not indented text a tag. It doesn't matter what tag, just not an H2-tag. CSS style will not apply without the text having a tag.
<h2>Not indented</h2>
<p>THIS SHOULD BE INDENTED</p>
<p>THIS SHOULD BE INDENTED</p>
<div>THIS SHOULD BE INDENTED</div>
<h2>Not indented</h2>
http://jsfiddle.net/xm71wr2a/1/
easy mistake to make, you just added an extra space between body: and not
it should be:
body:not(h2){
margin-left: 20px;
}
to elaborate on the previous answer, html text content like yours without at least a <p> tag will be very limited in its mutability from your css file especially when that is your only resource to manipulate that content.
wrapping the content you want indented in a <p> tag and leaving the <h2> tags around the content you don't want to indent will create the separation between the two, and allow you to manipulate them individually with css.
alternatively, a way to select ALL elements of a html page and apply the same css effect to them would be using the * selector:
*:not(h2){
margin-left: 20px
}
* = all html DOM elements
There is web-site for Nodeclipse FOSS project http://www.nodeclipse.org/
I am not quick at web development and styles, and there is problem I don't know how to approach:
On the main page http://www.nodeclipse.org/index.html there is <pre> element (source line)
and after it style is always different than at pragraph start.
I guess there's something to be in applied http://www.nodeclipse.org/pipe.css" (source), but what to look for? (As it is not about pre element but what happens after it)
FOSS project needs help with web.
As you can see, <pre> tag usage inside <p> tag breaks the DOM structure
So the text after pre tag are not enclosed inside the <p> tag.
It is not advised to use pre tag to display a content that doesn't lose it's meaning if not pre-formatted.
So use a <a> tag or some other suitable tags like span (if you don't want it to be a clickable link) to display the url and style it accordingly.
I need value "1" to be displayed adjacent to "Id" field but its displaying in a new line.The tag is supposed to be inline not sure why its being moved to new line.
jsfiddle
HTML
<b>Id : <p id="productid">1</p></b>
A <p> element is a paragraph, which by default is a block element.
In this case, you can't use <p> because:
It is not allowed inside <b> elements (because <p> can only be used where flow content is expected, but the content model of <b> is phrasing content). Always remember to validate your code.
Semantically, it's clear that it isn't a paragraph.
I suggest using
<b>Id: <span id="productid">1</span></b>
Demo
#productid{
display:inline-block;
}
p is a block level element by default. You can set it to display inline-block to make it do as you describe using basic css.
I'm not sure if you are unable to access css, so in case you cannot, see oriol's answer. No reason not to just make it a span.
Bit of a side note, it is a little odd to put a p tag inside a b tag. Technically you CAN do this, but it looks like using a span tag is the more proper way to handle this.
Is there a way to have blank HTML tags or in other words, tags that do nothing? For example <p> turns the inclosed text into a paragraph, <b> turns the text bold, <div> creates a box. I'm looking for a tag that has no effect on the text or it's environment. I want this so that I can customise it myself with css or js.
I am <x class="FancyText">king</x> of the world.
There are no “blank HTML tags”. What come closest are span and div, but the latter causes line breaks before and after (block rendering) by default and cannot be used in inline context, and the former does not allow any block-level elements inside it.
In practice, you can use a made-up element, like <foo>...</foo>, though with some problems on older versions of IE. This is widely regarded as a bad move, though; using span or div, as appropriate, with a class attribute is recommeded.
Consider explaining what you are really trying to achieve, instead of referring to fictional HTML tags expected to do nothing.
For this you'd use either the div or span element. From the HTML5 editor's draft:
The div element has no special meaning at all. It represents its children.
The span element doesn't mean anything on its own. ... It represents its children.
The difference between them is that the div element should be used where flow content is expected (that is to say, sections on a page), whereas the span element should be used where phrasing content is expected (within text).
In the example you've given, you'd want to use the span element:
I am <span class="FancyText">king</span> of the world.
You can do the following:
<div></div>
This will do nothing unless you add a class or id.
Or,
<span>Some text</span>
This will do nothing unless you add a class or id.
if you want to use <x ...> txt </x> as a place holder,
than any officially-unused set of chars will do fine.
I use <a> ... </a> for that
I have a <div contenteditable="true"></div> and when I enter some content into it, then delete these content, it seems like the browser is inserting a <br> element automatically into this element.
Does anyone has any experience with this? Know how to fix it?
Use SPAN element as your contenteditable element instead of DIV element.
Please read complete.
Q. Why the idea works?
A. Span is an inline element and Div is a block element. Block elements when empty, by default, will have zero dimensions(if no padding is applied to the block element). In contrast, empty inline elements tend to maintain their height and width becomes zero.
Hence, we just need to provide proper width to this Span(or any inline element), but, an inline element won't take width as a property and therefore we need to specify the display of this inline element as inline-block or block.
I have extensively used this idea for creating online-editors. Hope this helps.
NOTE: On changing display of an inline element to block/inline-block, doesn't mean the nature of element has changed. It is still an inline element, so an inline element will never be able to hold a block element inside it.
I ran into this issue before developing a feature for a web app. It's a default behavior for browsers. It's the same as a line break for text editors. Best way to handle it is to run a RegEx on the content when submitting/grabbing it to remove the tags, and then blanking it when no text is available.
I typically use the <br> tags to figure out where my line breaks are. Some browsers use <p> tags, so be sure to cross-browser test it.
Another way around this problem is to change the behavior of how the white space is handled inside the element. Use CSS:
white-space: pre-wrap;
Check out this link for both the solutions.
I was running with same problem when i make a element content editable i figure out a is inserted at the point i make element contenteditable at same time i remove breaks from the element. That perfectly worked for me.
myselect.attr('contenteditable', 'true');
myselect.find('br').remove();
This issue happened to me when the callback of $(window).KeyUp event returned no value.
Once applying "return true" in the registered callback the contenteditable div stopped applying unnecessary br tags.
This seems to work fine for me. If you want to remove the whitespace you can use:
str = $('div[contenteditable="true"]');
str.replace(/ /gi, '');
If you want to remove the <br> you can use:
str = $('div[contenteditable="true"]');
str.replace(/<br>/gi, '');
I was finally able to reproduce this. No matter what type of element is, contenteditable element will be inserted into a <br> element when all element node in it is empty(textContent==='')
Here provide a stable example which can reproduce this:
<p
style={{ padding: 10 }}
contentEditable tabIndex={1}>
<span></span>
{"123"}
<span></span>
</p>
Change element type from p to span can not solve the problem.
So the suggestion is check empty element and remove it in advance.