Firefox and seems to render a hyphen followed by differently to other browsers. Here is some test code that demonstrates the problem:
<html>
<body>
<div style="border: 1px solid blue;width: 50px">
This text can break. Do not - break this text.
</div>
</body>
</html>
Notice how in Firefox the second sentence does not break, but in Chrome and IE it breaks at the hyphen.
Does anyone know a good workaround so that the break does not occur?
The problem is that the "minus" sign in your code allows breaking.
There are lots of ways how you can write a "horizontal line" in HTML. –, —, -. There is "A list apart" article describing all the possible ways.
But also several specific Unicode characters exist which can be used by their code point numbers. One of them is a "non-breaking hyphen", which can be written like this: ‑.
I tried using it in your example and now the text does not break.
Naivist has the answer, but, for the record, I ended up using CSS's white-space: nowrap;
Related
I'm facing a problem here: I have a text in Korean decimal Unicode and the text is displayed in 4 columns and many rows (as it's the answers of a language test). The problem is that because the width of each answer is 20%, the sentence splits randomly in the middle of the word when it doesn't fit, instead of in the spaces between words. I don't know how to treat this, since this text is loaded and displayed automatically from a database.
The HTML code for each one of the 4 columns is like this:
<table class="courses" border="0" cellpadding="2" cellspacing="2" width="100%" style="font-size:13px;">
<tbody>
<td width="20%">
<p align="center">
<input name="a[X]" value=1" type="radio">
<br>
<?php echo "바쁘면 가지 마세요" ?> // this comes from a DB, its the unicodes of the korean characters<br>
</p>
</td>
</tbody>
</table>
What could I do to fix this and, when it doesn't fit, avoid splitting randomly, but do it when a sentence ends? If you notice in the Unicode codes, you can tell there's a space between ;면 가, but it breaks just anywhere, the same for all the text.
(Note that there aren't any encoding problems, the Korean characters are displayed properly. And it doesn't happen with other languages like Swedish or Spanish).
EDIT
Here's a working example.
Note that in the example, the first answer is split in the last two characters, when that word has five characters, so should be split 3 chars before.
Line breaking for CJK (Chinese/Japanese/Korean) text can be quite problematic given the current state of web standards.
There is not too much you can do in a language-agnostic manner; CSS level 3 defines related attributes (line-break and word-break), but I 'm not so sure what the support level is accross modern browsers (obviously not-so-modern browsers are entirely out of the picture).
It doesn't really matter as Korean can be split anywhere anyway. See this screenshot from Chosun.com:
The words are cut anywhere, seemingly randomly. You don't need to worry about hyphenation.
It sounds like you are just encountering the default behavior of white-space. You could take a look at the CSS white-space property and try something like pre.
I'm facing the same issue and I think the best solution is to wrap each word in a span with white-space: nowrap;. This makes sure there won't be any line break inside the word.
See this JSFiddle for a proof of concept: http://jsfiddle.net/we7jx08r/. When you change body's width, you'll notice that the line breaks are always correct.
See http://css-tricks.com/almanac/properties/w/whitespace/ for white-space: nowrap browser support (IE5.5+, FF1+, Safari 1+).
You could try a solution I worked on a while ago: https://stackoverflow.com/a/46714474/2114953
That is, if you like to use JS in order to wrap each word into span HTML elements and then use CSS display: inline-block to force words to go to new lines if need be.
I've been looking in to this for a project I'm working on. I think https://www.w3.org/TR/css-text-3/#line-breaking covers this, particularly "Example 5":
As another example, Korean has two styles of line-breaking: between any two Korean syllables (word-break: normal) or, like English, mainly at spaces (word-break: keep-all).
Indeed, the default behavior of Google Chrome (version 61) is that it breaks on the syllables (I assume as I don't speak or read Korean)
Setting word-break: all, seems to override this behavior and put line wraps in on white spaces only.
word-break: keep-all; Fixed it for me. I added this if the user is view the site in Korean specifically.
word-break: keep-all; -> "Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value 'normal'" (https://www.w3schools.com/cssref/css3_pr_word-break.asp)
I don't speak Arabic, but I need specific support for Arabic on our web. I need parts of Arabic words to be in a <span> with a different style than the rest of word. When I type two characters ش and س, they are composed into word شس, but when I use HTML markup
<span>ش</span>س
these letters are not concatenated right in the output.
In the picture, desired output is on second line, actual output is on first line.
EDIT: It works on Firefox, but does not work in Chrome/Safari.
Insert a zero-width joiner (e.g. using the entity reference ) at the end of the span element content: <span>ش</span>س.
More generally, the zero-width joiners at the start and end of each span element as well as (just to be more sure) before and after each span element, in situations where the text should have cursive (joining) behavior and span may break it.
The issue is discussed and illustrated on the Bidirectional text page by Andreas Prilop.
Update: Unfortunately, it seems that even does not help on current versions of WebKit browsers. They seem to treat HTML markup as breaking joining behavior, no matter what.
Update 2: As described in #NasserAl-Wohaibi’s comment, the new problem can be solved by using twice. However, in current Safari (5.1.7) for Windows, it does not help; in fact, it displays even شس wrong whereas without the joiner, it shows شس correctly.
This is actually a reported bug in WebKit, thus presumably affects all WebKit-based browsers.
As Jukka K. Korpela indicated, This is mostly a bug in most WebKit-based browsers(chrome, safari, etc).
A simple hack other than the TAMDEED char or getting contextual forms for Arabic letters would be to put the zero-width-joiner ( or ) before/after the letter you want to be treated as single Arabic ligature - two chars making up another one. e.g.
<p>عرب<span style="color: Red;">ي</span></p>
demo: jsfiddle
see also the webkit bug report.
Imagine I have a long, multi-word line of text in a DIV:
Hello there, dear customer. Please have a look at our offer.
The DIV has a dynamic width. I want to word wrap the above text. Currently, the wrapping happens on a word boundary which maximizes the length of the first line:
|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.
I would prefer that the wrapping happen on the sentence boundary. However, if no wrapping is necessary, I would like the line to remain as one.
To illustrate my point, please look at the various DIV widths and how I would like my text to wrap:
|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer.
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear
customer.
Please have a look
at our offer.
With words, you can use a soft hyphen so that the word wrapping happens on suggested syllable boundaries. If no wrapping is needed, the remains invisible. If wrapping is needed, the is where it happens:
magnificently
Is there an analogous method for hinting word-wrapping in HTML?
Use in words or <wbr> between words, as <wbr> won't introduce a hyphen.
See also:
quirksmode: <wbr> compat list
Not quite exactly, but close: http://jsfiddle.net/uW4h8/1/.
In brief, you should set white-space: nowrap; for you text container and use <wbr> to insert breaks between words as desired.
The elements <wbr> and often work, but not always. They are especially problematic when designing a static landing page that (a) has to work on a variety of screens and browsers and (b) has to look good.
In this case I want control over line-break hints at a variety of different screen resolutions. To do so, I use <br> tags and css. It can become a mess if it gets complex, but I found it works up to a point. For example:
<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>
I then use CSS with media queries to indicate when the various breaks should be triggered.
p.break-hints br {
display: none;
}
#media only screen and (max-width: 300px) {
p.break-hints br.break-small {
display: inline;
}
}
p.break-hints br.break-big {
display: inline;
}
Use a no-break space U+00A0 (or if you have no convenient way of entering the character as such) between words when a line break is not to be allowed, and normal space otherwise.
This won’t work when words contains hyphens “-”, and some other characters, such as parentheses, may cause problems as well, because some browsers treat them as allowing a line break after them. See http://www.cs.tut.fi/~jkorpela/html/nobr.html for a lengthy treatise, including various techniques of coping with the problems. But if you have normal words with normal punctuation only and no hyphens, you should be fine with the simple approach.
I just had the same issue. I had text like the following:
<div>Assistant Something / Anything Pabulum Nautical</div>
Where breaking it after the / character would really help readability.
In my case, I solved it by wrapping the desired "lower line-break priority" chunks with inline-block (now inline flow-root apparently) elements:
<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>
See snippet for results.
.d {
margin: 1em;
}
#b span {
display: inline-block;
}
<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>
<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>
I am using this bit of jQuery:
$('.myClass').html().replace("-", "‑");
to replace hyphens with non-breaking hyphens to prevent wrapping on text containing....you guessed it: hyphens
This works fine in IE8 and upwards but we have to support IE6 and 7, in which this approach does not work.
Any ideas?
I believe it is because IE 6-7 see a hyphen as a "word break".
The only way I can think to fix it is to wrap the phrase in <nobr></nobr> tags.
Eg. <nobr>word-break</nobr> which should prevent your issue.
Though without seeing some context it's hard to say how you would do this.
EDIT
This info may be helpful: http://www.cs.tut.fi/~jkorpela/html/nobr.html
Given a relatively simple CSS:
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
How do I make it so that the string stays constrained to the width
of 150, and wraps to a new line on the hyphen?
Replace your hyphens with this:
It's called a "soft" hyphen.
div {
width: 150px;
}
<div>
12333233323323339392332332323
</div>
In all modern browsers* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.
To quote from that link:
The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
Here's how it could be used to in the OP's example (or see it in action at JSFiddle):
<div style="width: 150px;">
12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>
*I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.
div {
width: 150px;
}
<div>
12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>
As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, , and none of which are fully supported either.
Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.
Additionally won't work for your example, as it will either:
work when word-breaking but when not word-breaking not display any hyphens, or
work when not word-breaking but display two hyphens when word-breaking
since it adds a hyphen on a break.
In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:
<div style="width:150px;">
<span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.
On a soft hyphen, your browser can word-break (adding an hyphen).
On a zero width space, your browser can word break (without adding anything).
Thus, if your code is something like :
111111222222-333333444444-555555
then your browser will show this with no word-break :
1111112222222-33333334444444-5555555
and this will every possible word-break :
111111-
222222-
-333333
444444-
555555
Just pick up the option you need. In your case, it may be the one between 4s and 5s.
You can also use :
word-break:break-all;
ex.
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
output:
abababababa
ababababbba
abbabbababa
ababb
word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.
The non-breaking hyphen works well.
HTML Entity (decimal)
‑
Instead of - you can use ‐ or \u2010.
Also, make sure the hyphens css property was not set to none (The default value is manual).
<wbr> is not supported by Internet Explorer.
Hope this may help
use <br>(break) tag where you want to break the line.
You can use 0 width space after hyphen character:
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
if You want line break before hyphen use - instead.