It seems to me, that HTML entity for nonbreaking space is not working properly in my code. I use: zvyšováním ceny – ta by negativně but instead of the dash and two words connected together, I see an ugly white space at the beginning of the new line. Do you have any idea how to solve this problem?
I know about about a non-breaking hyphen, but please remember there is the difference between a hyphen and a dash.
This works how it should, a line will break when there is a dash or a hyphen, but not when using a none-breaking hyphen, so by adding a will only prevent a line break at that space, hence called no breaking space ..
.. so as a result it will break at the dash and the following is causing the ugly white space at next line beginning
By removing the 2:nd , like this, it will work fine and no ugly space at next lines beginning
Some text having hyp - pen that should break after the hyphen
and another with the da – sh that should break after the dash
Fiddle demo
And if you don't want it to break, the dupe link has the answers needed, either using the non-breaking hyphen or wrap it and set the wrapper to white-space: nowrap
Dupe link: No line-break after a hyphen
The non-breaking space doesn't prevent the hyphen from being a point at which the word can break, so it effectively forces a space before and after the hyphen.
Use a non-breaking hyphen instead:
zvyšováním ceny‑ta by negativně
I think what you want is U+2060 WORD JOINER. This is intended to suppress line breaks that may otherwise occur, without introducing any spacing.
Related
The following snippet renders (assuming) correctly without trailing space underlined in Firefox 59, but in Chromium 65 the bogus space in the end of the line before the explicit line break is rendered:
<div style="width:100px">
This is long link, <br />with a line break
</div>
Screenshot from Chromium 65:
Screenshot from Firefox 59:
The obvious fix for this case is to remove the space in front of the line break, but it is unnatural.
Is not one of the rendering wrong? Is either of the behavior specified by HTML or CSS specification or is this really undefined?
Edit 1: The same behavior as in Firefox can be observed also in the IE, so it looks like the Chromium is the only one.
The problem isn't that Chrome is underlining the trailing space while Firefox isn't. The problem is that Chrome isn't removing the trailing space when wrapping the line (when the wrap originates from a hard <br /> wrap). The space is underlined because it is there, which is inconsistent with how Chrome handles trailing spaces when auto-wrapping text.
The CSS specification on handling trailing spaces on wrapped text states:
4.1.3. Phase II: Trimming and Positioning
As each line is laid out,
A sequence of collapsible spaces at the beginning of a line is removed.
If the tab size is zero, tabs are not rendered. Otherwise, each tab is rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of the tab size from the block’s starting content edge. The tab size is given by the tab-size property.
A sequence of collapsible spaces at the end of a line is removed.
If spaces or tabs at the end of a line are non-collapsible but have white-space set to pre-wrap the UA must either hang the white space or visually collapse the character advance widths of any overflowing spaces such that they don’t take up space in the line. However, if overflow-wrap is set to break-spaces, collapsing their advance width is not allowed, as this would prevent the preserved spaces from wrapping.
The CSS Working Group has discussed the inconsistent handling of trailing white-space on their github repo, specifically mentioning that Firefox's handling of trailing whitespace is the most ideal:
And lastly there's the point that trailing spaces just look bad, and that having a space just inside the closing tag of an inline or before a <br> is a reasonably common unintentional markup pattern that shouldn't have a bad effect on rendering. The preserved trailing space becomes noticeable both when the inline is styled, as in the example given by #palemieux, and also when we chose text alignments other than start. This gives a real-world use case indicating a preference for Firefox's behavior.
From this discussion, the earlier mentioned CSS spec has been updated (in the github repo, but not apparently published yet) to match the Firefox (Gecko) behavior. Specifically updating points 1 and 3 from above to :
A sequence of collapsible spaces at the beginning of a line (ignoring any intervening inline box boundaries) is removed.
A sequence of collapsible spaces at the end of a line (ignoring any intervening inline box boundaries) is removed.
Emphasis on changes added by me.
If we check the specification we can read this:
Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped.
I am needing to style sequences of characters in a single paragraph e.g.
<span style="color:red">hello </span><span style="color:blue">world</span>
The paragraph of text flows across multiple lines. The issue is that the spaces at the end of spans are not rendered by browsers and the solutions to force them to display, changes how the lines break. This means that when the text is coloured differently at different positions, words jump from one line to another which isn't acceptable in this app.
The two methods I have tried for displaying terminating spaces that both change line breaks are:
replace terminating spaces with nbsp "\u00a0"
Although this renders the spaces, it means that it changes how rows break across lines.
replace terminating spaces with single space spans that use white-space: pre style
This also renders spaces but causes similar disruption to line breaks.
Is there anything else I can try that will not change line breaks?
While solving a little bug on a website caused by a non-breaking space ( ) I was wondering if there's an opposite.
Is there an HTML code for a breaking space, and if so, what is it?
I saw mention in this question about a zero-width space (), but that won't give any width (obviously).
Does an HTML entity exist for a regular space?
is a regular space (by its numeric ASCII value).
If you are using HTML and you would like more than one space to to appear, will not work. The unfortunate part about is it does not wrap properly because it is a non-breaking space.
For those that reached here looking for a solution, try the CSS
white-space: pre-wrap;
This will allow you to have multiple spaces side by side in a single line. It works great for chat programs.
There are multiple html entities for regular white space, which allow breaking, for instance
Read this article for more information: https://www.codetd.com/en/article/6915972
There may be other blank entities (which won't compact to a single) but there is another workaround for doing some padding but still having some wrapping occur as required:
Use the "ZeroWidthSpace" html entity and alternate with either "nbsp" for clarity or simply a space character.
I noticed in my index.php file if I do:
Versus
There's more of a space between the two when I use a line-break. Where can I read more on this?
In the HTML specifications, any number of white space becomes a single white space when displayed.
Doing:
is identical to
Or any number of carriage returns or spaces inbetween.
If you don't have white space, then the two just run into each other. This allows things such as bolding in the middle of a word.
EDIT
Thanks to insertusernamehere, the exact location in the HTML 4.01 specification is at:
http://www.w3.org/TR/html401/struct/text.html#h-9.1
In particular, the part that says:
Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.
This doesn't technically have anything to do with HTML, which itself is just a way of marking up the page. It's actually the CSS styling that collapses white-space via the white-space property. That property gives you the following options:
normal - This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
pre - This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.
nowrap - This value collapses white space as for 'normal', but suppresses line breaks within text.
pre-wrap - This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
pre-line - This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
By default, it is set to normal. This will cause a browser to collapse any sequence of white-space into a single visible space when rendering the HTML structure. Since line breaks are a form of white-space, they also get collapsed.
See 16.6 White space: the 'white-space' property
In PHP, much like HTML, a line-break/carriage return is generally just used to make your text more legible. This is so that future code edits are simple an easy to make.
Not sure if this is completely relevant but I've found another post which relates to PHP formatting: PHP Coding style - Best practices
In Firefox a '/' breaks a line, but in chrome the line continues. How can I tell chrome to allow a line break on '/'?
This is a problem for the middle table on
http://webnumbr.com/api
You could surround the '/' with Unicode Zero-Width space characters. (For the links, don't do it for the hrefs)
See here: http://www.fileformat.info/info/unicode/char/200b/index.htm
Use the CSS word wrap property:
word-wrap: break-word
Don't rely on special characters to break words.