I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse.
big.ass.email#addre
ss-
is.extremely.lame.de
Because of word-wrap: break-word; it breaks after "addre" but ceause the rest of the address doesn't fit in one line it breaks again at a "prefered breakpoint" which happens to be the "-". In desired behaviour the second break in the email address would not be after "-" but after "extremely". I fear that's not possible with just CSS. Isn't it?
Here you can see a small example: http://jsfiddle.net/sbg8G/2/
Your best bet here would be to use <WBR> tag or character to introduce a soft-break wherever you wish. e.g.:
Demo: http://jsfiddle.net/abhitalks/sbg8G/15/
HTML:
...
<a href="big.ass.email#address-is.extremely.lame.de">
big.ass.email#address-is.extremely.lame.de
</a>
...
Here, is inserted after the "#" and after "-is" to cause a break at those points.
Important: word-wrap and word-break won't help you here.
Reason:
word-break is meant for CJK (Chinese, Japanse, Korean) texts. (Reference). Its main purpose is to prevent word breaks for CJK text. Rest is normal.
word-wrap is used to specify whether or not the browser may break lines within words in order to prevent overflow. That's it. (Reference) The main thing to notice is that "..normally unbreakable words may be broken at arbitrary points.. ". Arbitrary points don't give you much control, do they?
Hard-hyphens help to indicate the break points. You have a hyphen in your email address and that gives a hint to break word there.
Note:
A better alternative would be have CSS3 do it for us. word-wrap and word-break doesn't allow control of break points. hyphens does, but, unfortunately hyphens still "is an experimental technology".
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
hyphens should be able to do the trick along with:
hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before
But, this doesn't work currently as it should. Otherwise, a would have helped you out.
Note 2:
hyphens, would add a "hard hyphen" (-) which would cause unintended results in your case (the email address would change).
Credits: here, here, and here
Hello I have a similar issue and I solve it with:
overflow-wrap: break-word;
word-wrap: break-word;
Also you could check this:
Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc
You can try using text-overflow:ellipsis;
overflow:hidden;
text-overflow:ellipsis;
http://jsfiddle.net/sbg8G/8/
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;
}
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
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 am trying to word-wrap an email address within a div, where otherwise it would overflow because it's too long for the div's width.
I know this issue has been covered here before (e.g. this question), but read-on, because I cover all the possible solutions mentioned there and elsewhere.
None of the below solutions do exactly what I want:
CSS
"word-wrap: break-word".
Depending on the div's width, this breaks the email address at awkward places. e.g.
info#longemailaddress.co.u
k
Use a Soft Hyphen within the HTML:
This is really well supported, but renders a visible hyphen on the page, leading user to believe the email address has a hyphen in there:
info#long-
emailaddress.co.uk
Use a thinspace or zero-width space within the email address:
(thinspace)
(zero-width space)
Both of these insert extra characters (bummer if user copy-pastes)
Linebreaks...
<br />
... are out because, most of the time, the div is large enough to contain the email address on one line.
I guess I'm hoping for some ingenious way of doing this in HTML/CSS, perhaps making use of pseudo elements (e.g. :before / :after), or by using a soft hyphen but somehow hiding it with CSS in some clever way.
My site uses jquery, so I'll resort to that if I must, although I'd rather not include a whole hyphenation library just for this one little problem!
Answers on a postcard please. (Or, ideally here...)
You can clip the text and use a tooltip
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
What I do is on hover show the full text as tooltip or use the title attribute for tooltip.
<p class="email" title="long-email-address#mail.com">...</p>
Maybe you can try <wbr> instead of <br>
Unfortunately, this won't work in IE.
word-wrap:break-word is based on the width of the container you want to break the word in. It's not going to break it where you decide to. You are unfortunately out of luck unless you want to reduce the width of the div so that it breaks where you want.
The other solutions, as you've discovered, are inadequate for your needs. Additionally, using a "jQuery hyphenation library" probably won't fix your issue either because it'll just be injecting the characters, line breaks, or so on just as you tried. You end up with the same problem.
I don't mean any offense by this, but maybe it would be good to rethink the design, rather than work around the design? Robin's answer is a decent alternative, though you won't be able to select the email address without javascript.