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.
Related
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 am using an html template to send emails programatically. I know nothing about html, but I've just learned that it will collapse consecutive white space characters, which ruins my formatting(I am emailing a table of numbers). How can I solve this problem?
Just use <pre> tag like so:
<pre>
This is some text with some extra spacing and a
few newlines
thrown in
for good
measure
</pre>
Working Example: jsFiddle
and a Good reference on pre tag.
If you don't want consecutive spaces to collapse. Just set CSS property white-space.
e.g.:
white-space: pre;
<span style="white-space:pre;"> </span>
Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Well, you can use the metacharacter to produce a "non-breaking space." (I used one in-between these two sentences. But I didn't use one here. Notice how the spacing between these sentences is slightly different, and how the last space is twice as wide because I used two tags?)
Fundamentally, I suggest that you should be using <table> tags within your e-mail body, thus identifying the data as "tabular" and giving you a rich array of options (styles, etc ...) for formatting it. It will look much better than anything you could do by means of "ASCII Art ..."
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/
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
Server side, I build a list of strings which are the option text of an html select multiple.
Every string is the result of the concatenation of four strings. First, second and third have a length=5. Third string has a variable length, so I complete its length to 19 chars with white spaces:
StringUtils.rightPad(data.toUpperCase(), 19, " ");
Nevertheless, in my html page, these whites spaces are removed.
I have looked for similar problems in this web and others, I have tried with & nbsp;, \u0020, I have tried with css style white-space:pre-wrap;, I have tried a lot of things but white spaces are not preserved.
Any one knows how to solve this problem without javascript? only with html/styles.
Thank you, regards
The default styling in webpages is to collapse whitespace, you can easily change this with the white-space property in CSS:
p {
white-space: pre;
}
The values pre and pre-wrap preserve whitespace, the difference between them being that pre will only wrap the text on line-breaks, whereas pre-wrap will wrap on all whitespace characters (like regular text. Your question states that you have tried this and it did not work, however I have tested this code and it worked fine for me (using Google Chrome) and the W3C reference says that it works in all major browsers, therefore I suspect it is a mistake in implementation, try again and double-check you are applying styles to the correct class and there are no specificity issues.