Given the code in the screenshot,
I get words highlighted in yellow if I take a note:
How could I achieve the result where the empty spaces between these words would be highlighted too, so that the whole note is highlighted in yellow?
The span element surrounding all these divs (wrd) is there by chance, so it could easily exist in some other structure.
I thought of wrapping all these divs and apply a style to a container, but the problem is that I can not wrap these words in any container as they may pertain to several notes and some of these notes could even contain a subset of these words or some text after the words I have highlighted (running the risk to break the HTML structure opening and closing divs the wrong way).
The element wrd has no custom CSS style applied.
WRDS element are now spaced like this:
<wrd>Content</wrd>`whitespace`<wrd>Content2</wrd>
You need to contain whitespaces in the wrd element like this:
<wrd>Content </wrd><wrd>Content2 </wrd>
#background{
background-color:yellow;}
<span id='background'>This is a sentence</span>
Looking for a CSS property which will run on all the browsers where condition for word is as follows.
1. word should not be break.
2. href link text should be break within the html tag.
3. hyphen text should not be break.
4. The content may be in DIV, span or in a tag having multi lines.
CSS has white-space property which can be used.
URL : https://www.w3schools.com/cssref/pr_text_white-space.asp
For all links, you can add the following code:
a{white-space:initial;}
Could any of you please provide the solution that why knockout JS removes the extra space when I am binding to the grid.
For example, I am getting the below data for a column from the database.
"I am a developer"
I have given two space between "a" and "developer" but when it binds with the grid, it removes the extra space and make it as "I am a developer".
How can I preserve the spacing?
This is not a knockout problem, is about the way your HTML is displayed in the browser.
Your HTML renderer (browser itself) is taking those two spaces and combining then into one. Adding the empty HTML char code for white space ( ), forces the browser to display an empty space it.
Also, check this HTML tag <pre></pre> for preformatted text which renders the text as is. From the W3C schools:
Text in a element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks.
How can I insert different complex bullets elements which we use in Microsoft word into html text area?
When I insert them into text area, text area changes its style and replace bullets elements with '?' question mark.
Why html is not identifying complex bullets elements? Textarea is only identifying simple bullets elements.
HTML knows nothing of Microsoft Word's proprietary complex bullet elements.
HTML knows nothing of Microsoft Word's formatting.
HTML knows nothing but the plain ASCII text you placed into the textarea.
There are Rich Text Editors like http://ckeditor.com/ that can convert MS Word content into HTML (you used one similar on the textarea where you entered your question).
You may also need to ensure your content is rendering using UTF-8 to correctly display your content (and avoid the empty squares, etc.).
I have an unordered list styled into tabular navigation that needs to look like this: . To give the tabs rounded corners each tab has left, middle, and right div with respective css backgrounds*.
When I format the list items like so (jsFiddle):
<li class="tab">
<div class="item-wrap"><span class="item-before"></span><span class="item">Inventory</span><span class="item-after"></span></div>
</li>
I get the desired result:
But when I format the HTML to make it more readable, like so (jsFiddle):
<li class="tab">
<div class="item-wrap">
<span class="item-before"></span>
<span class="item">
Inventory
</span>
<span class="item-after"></span>
</div>
</li>
The rendering changes:
What is going on?
* Note: I know that this approach is outdated. The class I built this for restricts us to HTML 4 and CSS 2.
I can't fully explain it, but it is to do with the whitespace around the a elements...
This renders correctly...
<span class="item">Inventory</span>
This does not...
<span class="item"> Inventory </span>
So reformatting the HTML, introduces whitespace around the a elements.
Browsers treat line feeds as whitespace (like literal space character).
It's no secret that HTML condenses multiple whitespace characters into a single space.
However, what's less known is what element that space belongs to.
Consider this HTML: <b> <i> spaces!</i></b>
The two spaces arond the i element will be condensed, but will the resulting space be inside it, or out?
This difference is what is causing your HTML to render differently when you have different indenting.
Personally, I like to use PHP to echo out HTML like this, so I can have it on multiple lines in the source but only output one line of HTML:
<?php
echo "<span>"
."Hello, world!"
."</span>";
?>
Results in:
<span>Helld, world!</span>
W3 teach us:
By default, block-level elements are formatted differently than inline
elements. Generally, block-level elements begin on new lines, inline
elements do not. For information about white space, line breaks, and
block formatting, please consult the section on text.
And in the cited link
For all HTML elements except PRE, sequences of white space separate
"words" (we use the term "word" here to mean "sequences of non-white
space characters"). When formatting text, user agents should identify
these words and lay them out according to the conventions of the
particular written language (script) and target medium.
So basically, since your elements are defaulted by inline elements, your tags are handled as a "word", and so the spaces between your tags does counts when rendering the text.
Basically, at this point, there are two things you might not want:
Write all your code at one line
Use extra CSS to be able to put the tags in separated lines
Well, at least I would not want this. That is why I use haml to generate HTML. Like many HTML template engines, it Allows you to handle white spaces between tags without re-indenting your code