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.
Related
I'm using a <pre> tag in my design. The thing is my pre even breaks the words at the end of the line. Say I'm at the end of the line and if there is a large word then it breaks it. For example at the end of the line we have a large word say STACKOVERFLOW.
So my pre tag display the word STACKOVERFLOW as:
STAC
KOVERFLOW
Where as it should show the whole word in the new line.
Following is my code for pre tag:
pre{
white-space: pre-wrap;
word-wrap: break-word;
}
Following is my HTML Code:
<div uib-carousel active="active" class="text-primary">
<div uib-slide index="$index" class="uibSlider" ng-repeat='summary in desc'>
<pre class="text-justify">{{summary.info}}</pre>
</div>
</div>
See the w3 specification for the word-wrap property:
‘break-word’
An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit. No hyphenation character is inserted at the break point.
Because you're using the 'break-word' rule, this means that your long words will be broken if there is no width left in the container and if there are no other more acceptable break points.
Instead try using the 'normal' rule:
‘normal’
Lines may break only at allowed break points. However, the restrictions introduced by ‘word-break: keep-all’ may be relaxed to match ‘word-break: normal’ if there are no otherwise-acceptable break points in the line.
break-word means that you want the word to break.
Does the following work for you?
pre {
white-space: pre-wrap;
}
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.
I am trying to break a word based on commas instead of spaces
I have seen the solutions that include adding the <wbr> tag to your HTML, however, for dynamic information now I need another script to insert it into the HTML text and if the user doesn't have JS enabled it doesn't really do me much good.
As of now, I am using a combination of:
white-space: break-word;
word-break: break-all;
It works as an OK solution, however, both of these solutions I found (https://stackoverflow.com/a/15137272/1887101; break long-no-spaces-lines on commas, dots, hyphens or other special chars) are more than 3 years old - so I am wondering if there are any more recent solutions available for this issue?
Sample string:
C31C636363-Thermal,80mm, ReStick,Serial,A/C,PSIncluded,EDG
Sample break:
C31C636363-Thermal,80mm, ReStick,
Serial,A/C,PSIncluded,EDG
I am trying to break a word based on commas instead of spaces
You can't. CSS does not support that. Breaking on spaces is hard-wired.
You have no choice but to use JS to pre-process your content to perhaps insert zero-width spaces after commas, or perhaps do that on the server side.
I have a string that is causing a large gap in my text as it is not wrapping. I'm guessing the default wrapping for Chrome is by word. Any clues on how to solve this?
You can use CSS to solve this. Just add word-break to the css of the containing html and select the desired behavior.
Syntax
word-break: normal|break-all|keep-all;
Value Description
normal Break words according to their usual rules
break-all Lines may break between any two letters
keep-all Breaks are prohibited between pairs of letters
This answer came from W3Schools http://www.w3schools.com/cssref/css3_pr_word-break.asp
Does HTML support any kind of hinting for (title) line-breaks? The problem is that often page titles or navigational titles have funny line breaking, as they happen to break wherever the current HTML element spacing allows. Manual line-breaks would give much nicer visuals, when line-breaks are needed.
The line-break hints should be something the editor can himself/herself enter to an <input type=text> field.
There's the (soft hyphen) entity and the <wbr> tag (HTML5) for word break marks. Notice that will create a hyphen if the line breaks, while <wbr> won't.
See also http://www.quirksmode.org/oddsandends/wbr.html.
So an editor could use for word breaking if he prefers a dash (-), or if he prefers only a word break.