I have noticed that Chrome/Edge and Firefox wrap long hyperlinks differently. Firefox breaks them on the slash / character, whereas Chrome/Edge doesn't consider the slash / character special.
Is there some description about this behavior? That is:
Why is it different?
Which one is really correct?
div {
background: silver;
font-family: 'Courier New';
font-size: 16px;
max-width: 18ch; width: min-content;
}
a.bare {
overflow-wrap: break-word;
}
<div>
<p>see <a href="..." class="bare">
http://site.web/section/paaaaaaaaaaaaaaaaaaaaage.html</a></p>
</div>
overflow-wrap: break-word:
Firefox:
Chrome and Edge:
overflow-wrap: initial /* normal */:
Firefox:
Chrome and Edge:
What you're looking for is the line-break property. It specifies what characters are allowed to have line-breaks and which do not, but it's not precise. To summarize it gives some specific rules for certain characters in certain languages, but it does not specify the situation that you have asked about. It doesn't specify anything about the slash character. So since the CSS standard doesn't specify what is right, neither of these implementations are wrong.
The default value for the line-break property is auto which does the following:
The UA determines the set of line-breaking restrictions to use, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines.
There is another standard, the unicode line breaking algorithm, which is far more specific and it includes a little thing which says that slashes should provide a line breaking opportunity after them for the exact situation you have inquired about. URLs being as frequent as they are on the web, it makes sense to be able to do line breaks in them at slashes, and so it's in that standard.
According to the firefox source code as best as I could find, it says it follows that unicode standard, but that's not what it appears to be doing according to your example, instead the slash in firefox seems to provide a line breaking opportunity before it. Maybe someone with more in depth knowledge of the firefox source code could explain why it does that?
I'm not sure about the chrome line breaking algorithm because it's a lot more difficult to search the source code, but I imagine the developers decided that the '/' character doesn't deserve a line break under those circumstances based on the broad definition of 'auto' in the css spec.
break-word: If the exceeds the width of the line, then the word is forced to splite and wrap.
You can refer to this doc for some explanations of the value of the overflow-wrap property, and I think the results shown in Edge/Chrome are correct.
In your example, the text is treated as a single word, so when setting the attribure value to normal or initial, it will not be forced to splite. You can add a few spaces to the text and you will find out this.
So, here's my problem: I'm creating a website where I've some posts. In those posts, I put a "::first-letter" highlighting to make it bigger, and it works perfectly.
But, when I'm going to load a post with first letter as a Unicode Emoticon that is a UTF-8 mb4 (2 Unicode Chars), it fails, by trying to load the single char as 2 separated, so the result is something strange.
This is a screenshot:
How can you see, there's a bigger letter and one smaller that are unknown, and then the same emoticon visible, because I created a post with the same emoticons wrote down 2 times.
.first_letter_post::first-letter {
float: left;
padding-right: 20px;
padding-top: 0px;
margin-bottom: -15px;
margin-top: -10px;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
}
<p class="first_letter_post">🗿foobar</p>
This is the character: 🗿, and I'm using Google Chrome.
I hope someone can help me with this.
Chrome has a long know history of problems with unicode [bug]. This issues is a combination of those problems:
Failing to correctly recognize symbols consisting of more than 3 bytes.
Styling symbols regardless of being a letter unit
This results in Chrome tearing a single symbol apart.
IE is correctly recognizing unicode symbols consisting of multiple codepoints and applies the styling regardless of the spec stating that ::first-letter should be applied to typographic letter units only.
Firefox behaves very strict to the spec, not applying styles to non-letter units. I could not determine whether the Alphanumeric Supplement Space should be treated as letter as well, but Firefox is not treating them as such.
This means, that you should refrain from using ::first-letter when you are heavily relying on it and know that those characters might occur.
A possible solution I could think of, is manually detecting the first character via javascript and wrapping it in a tag and then apply the styles. My solution is a bit messy due to the hard coded hex value, but it might be sufficient.
// manually wrapping the "first character"
Array.prototype.forEach.call(document.querySelectorAll("div"),function(el){wrapFirstChar(el)});
function wrapFirstChar(div){
let content = div.innerHTML,chars=content.charCodeAt(0) >= 55349?2:1;
div.innerHTML = "<span>"+content.substring(0,chars)+"</span>"+content.substring(chars);
}
// this is what javascript sees at the first two positions of the string
//Array.prototype.forEach.call(document.querySelectorAll("p"),(e)=>console.log(e.innerHTML.charCodeAt(0)+"+"+e.innerHTML.charCodeAt(1)));
p::first-letter {
font-weight: bold;
color:red;
}
span {
font-weight: bold;
color:blue;
}
p{
margin:0;
}
<h2>using ::first-letter</h2>
<p>🗿 4 bytes symbol</p>
<p>🅰 Enclosed Alphanumeric Supplement 1F170</p>
<p>𝞹 Mathematical Alphanumeric Symbols 1D7B9</p>
<p>𞸀 Arabic Mathematical Alphabetic Symbols 1EE00</p>
<p>a normal character (1 byte)</p>
<h2>manually replaced</h2>
<div>🗿 4 bytes symbol</div>
<div>🅰 Enclosed Alphanumeric Supplement 1F170</div>
<div>𝞹 Mathematical Alphanumeric Symbols 1D7B9</div>
<div>𞸀 Arabic Mathematical Alphabetic Symbols 1EE00</div>
<div>a normal character (1 byte)</div>
I'm trying to achieve the following effect:
But it seems like the only way to do this is with word-wrap: overflow-wrap which isn't widely supported.
So instead the only solution I seem to have is to use: word-break: break-all which will produce the following results:
NOTICE: how the from is broken in the second picture? What styles do I need to use to get the results from the first image?
JSFiddle: https://jsfiddle.net/jennifergoncalves/k4yn9ucf/
word-wrap (documentation) is a legacy name for overflow-wrap. word-wrap is required for IE (11), Edge, and Opera Mini. Other major browsers now all support overflow-wrap (source). This property can be set to:
normal - breaks only between words
break-word - may break words in the middle if necessary
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
There is another property called word-break (documentation) which control how words are broken. Accepted values:
normal - default
break-all - break between any two characters of a word
keep-all - identical to normal for non-CJK (Chinese/Japanese/Korean) text
In contrast to overflow-wrap, word-break will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
So it would seem there are two options to get properly wrapped text:
overflow-wrap: break-word
word-break: break-all
Here's a comparison of the two, along with a no-wrapping example:
p {
background-color: #009AC7;
color: #FFFFFF;
font-size: 18px;
font-family: sans-serif;
padding: 10px;
text-align: justify;
width: 250px;
}
.wrap1 {
overflow-wrap: break-word;
}
.wrap2 {
word-break: break-all;
}
No wrapping:
<p><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>
<code>word-wrap: normal</code> and <code>word-break: normal</code>
<p class="wrap1"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>
<code>word-wrap: normal</code> and <code>word-break: break-all</code>
<p class="wrap2"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>
Can you see the problem? If you are using the latest Chrome, for example, the word breaks are placed at arbitrary points. There is nothing preventing your browser from breaking from into f-rom because it would need to understand the hyphenation rules for the particular language.
Fortunately, there is hyphens (documentation) which should solve your problem. The value auto should allow the browser to decide when to hyphenate.
Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.
Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.
Let's see it in action:
p {
background-color: #009AC7;
color: #FFFFFF;
font-size: 18px;
font-family: sans-serif;
hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
padding: 10px;
text-align: justify;
width: 250px;
}
<code>hyphens: auto</code>
<p lang="en-US"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>
In the latest Chrome on Mac this produced a nice result (although the gaps in the text are not very pleasant to look at), conforming to the English hyphenation rules.
Unfortunately, support for this property is a little spotty. Chrome supports this only on Mac and Android. Safari, IE, and Edge require vendor prefixes (source). If this is good enough for you, use hyphens. If not, consider using an alternative solution, such as a JavaScript automatic hyphenator, e.g. Hyphenator. Your last resort would be to use a hyphenation engine to parse your text and find all word-break points, then insert them into your as HTML soft hyphens – – in combination with hyphens: manual.
Ever since switching from TABLE-layout to DIV-layout, one common problem remains:
PROBLEM: you fill your DIV with dynamic text and inevitably there is a super-long word that extends over the edge of your div column and makes your site look unprofessional.
RETRO-WHINING: This never happened with table layouts. A table cell will always nicely expand to the width of the longest word.
SEVERITY: I see this problem on even the most major sites, especially on German sites where even common words such as "speed limit" are very long ("Geschwindigkeitsbegrenzung").
Does anyone have a workable solution to this?
Soft hyphen
You can tell browsers where to split long words by inserting soft hyphen ():
averyverylongword
may be rendered as
averyverylongword
or
averyvery-
longword
A nice regular expression can ensure you won't be inserting them unless neccessary:
/([^\s-]{5})([^\s-]{5})/ → $1$2
Browsers and search engines are smart enough to ignore this character when searching text, and Chrome and Firefox (haven't tested others) ignore it when copying text to clipboard.
<wbr> element
Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:
averyvery<wbr>longword
Breaks with no hyphen:
averyvery
longword
You can achieve the same with zero-width space character (or ​).
FYI there's also CSS hyphens: auto supported by latest IE, Firefox and Safari (but currently not Chrome):
div.breaking {
hyphens: auto;
}
However that hyphenation is based on a hyphenation dictionary and it's not guaranteed to break long words. It can make justified text prettier though.
Retro-whining solution
<table> for layout is bad, but display:table on other elements is fine. It will be as quirky (and stretchy) as old-school tables:
div.breaking {
display: table-cell;
}
overflow and white-space: pre-wrap answers below are good too.
Two fixes:
overflow:scroll -- this makes sure your content can be seen at the cost of design (scrollbars are ugly)
overflow:hidden -- just cuts off any overflow. It means people can't read the content though.
If (in the SO example) you want to stop it overlapping the padding, you'd probably have to create another div, inside the padding, to hold your content.
Edit: As the other answers state, there are a variety of methods for truncating the words, be that working out the render width on the client side (never attempt to do this server-side as it will never work reliably, cross platform) through JS and inserting break-characters, or using non-standard and/or wildly incompatible CSS tags (word-wrap: break-word doesn't appear to work in Firefox).
You will always need an overflow descriptor though. If your div contains another too-wide block-type piece of content (image, table, etc), you'll need overflow to make it not destroy the layout/design.
So by all means use another method (or a combination of them) but remember to add overflow too so you cover all browsers.
Edit 2 (to address your comment below):
Start off using the CSS overflow property isn't perfect but it stops designs breaking. Apply overflow:hidden first. Remember that overflow might not break on padding so either nest divs or use a border (whatever works best for you).
This will hide overflowing content and therefore you might lose meaning. You could use a scrollbar (using overflow:auto or overflow:scroll instead of overflow:hidden) but depending on the dimensions of the div, and your design, this might not look or work great.
To fix it, we can use JS to pull things back and do some form of automated truncation. I was half-way through writing out some pseudo code for you but it gets seriously complicated about half-way through. If you need to show as much as possible, give hyphenator a look in (as mentioned below).
Just be aware that this comes at the cost of user's CPUs. It could result in pages taking a long time to load and/or resize.
This is a complex issue, as we know, and not supported in any common way between browsers. Most browsers don't support this feature natively at all.
In some work done with HTML emails, where user content was being used, but script is not available (and even CSS is not supported very well) the following bit of CSS in a wrapper around your unspaced content block should at least help somewhat:
.word-break {
/* The following styles prevent unbroken strings from breaking the layout */
width: 300px; /* set to whatever width you need */
overflow: auto;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
-moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}
In the case of Mozilla-based browsers, the XBL file mentioned above contains:
<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
More information on XBL:
http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference
Example of implementing the CSS 'word-wrap' feature:
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
-->
<binding id="wordwrap" applyauthorstyles="false">
<implementation>
<constructor>
//<![CDATA[
var elem = this;
doWrap();
elem.addEventListener('overflow', doWrap, false);
function doWrap() {
var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
while (walker.nextNode()) {
var node = walker.currentNode;
node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
}
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>
Unfortunately, Opera 8+ don't seem to like any of the above solutions, so JavaScript will have to be the solution for those browsers (like Mozilla/Firefox.) Another cross-browser solution (JavaScript) that includes the later editions of Opera would be to use Hedger Wang's script found here:
http://www.hedgerwow.com/360/dhtml/css-word-break.html
Other useful links/thoughts:
Incoherent Babble » Blog Archive » Emulating CSS word-wrap for Mozilla/Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OU] No word wrap in Opera, displays fine in IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html
CSS Cross Browser Word Wrap
.word_wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Use the style word-break:break-all;. I know it works on tables.
Do you mean that, in browsers that support it, word-wrap: break-word does not work ?
If included in the body definition of the stylesheet, it should works throughout the entire document.
If overflow is not a good solution, only a custom javascript could artificially break up long word.
Note: there is also this <wbr> Word Break tag. This gives the browser a spot where it can split the line up. Unfortunately, the <wbr> tag doesn't work in all browsers, only Firefox and Internet Explorer (and Opera with a CSS trick).
Just checked IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows, and Safari:
word-wrap: break-word;
works for long links inside of a div with a set width and no overflow declared in the css:
#consumeralerts_leftcol{
float:left;
width: 250px;
margin-bottom:10px;
word-wrap: break-word;
}
I don't see any incompatibility issues
I just found out about hyphenator from this question. That might solve the problem.
After much fighting, this is what worked for me:
.pre {
font-weight: 500;
font-family: Courier New, monospace;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Works in the latest versions of Chrome, Firefox and Opera.
Note that I excluded many of the white-space properties the others suggested -- that actually broke the pre indentation for me.
For me on a div without fixed size and with dynamic content it worked using:
display:table;
word-break:break-all;
Re the regex in this comment, it's good, but it adds the shy hyphen only between groups of 5 non-whitespace-or-hyphen chars. That allows the last group be much longer than intended, since there's no matching group after it.
For instance, this:
'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1$2')
...results in this:
abcde12345678901234
Here's a version using positive lookahead to avoid that problem:
.replace(/([^\s-]{5})(?=[^\s-])/g, '$1')
...with this result:
abcde12345678901234
The solution I usually use for this problem is to set 2 different css rules for IE and other browsers:
word-wrap: break-word;
woks perfect in IE, but word-wrap is not a standard CSS property. It's a Microsoft specific property and doesn't work in Firefox.
For Firefox, the best thing to do using only CSS is to set the rule
overflow: hidden;
for the element that contains the text you want to wrap. It doesn't wrap the text, but hide the part of text that go over the limit of the container. It can be a nice solution if is not essential for you to display all the text (i.e. if the text is inside an <a> tag)
Update: Handling this in CSS is wonderfully simple and low overhead, but you have no control over where breaks occur when they do. That's fine if you don't care, or your data has long alphanumeric runs without any natural breaks. We had lots of long file paths, URLs, and phone numbers, all of which have places it's significantly better to break at than others.
Our solution was to first use a regex replacement to put a zero-width space () after every 15 (say) characters that aren't whitespace or one of the special characters where we'd prefer breaks. We then do another replacement to put a zero-width space after those special characters.
Zero-width spaces are nice, because they aren't ever visible on screen; shy hyphens were confusing when they showed, because the data has significant hyphens. Zero-width spaces also aren't included when you copy text out of the browser.
The special break characters we're currently using are period, forward slash, backslash, comma, underscore, #, |, and hyphen. You wouldn't think you'd need do anything to encourage breaking after hyphens, but Firefox (3.6 and 4 at least) doesn't break by itself at hyphens surrounded by numbers (like phone numbers).
We also wanted to control the number of characters between artificial breaks, based on the layout space available. That meant that the regex to match long non-breaking runs needed to be dynamic. This gets called a lot, and we didn't want to be creating the same identical regexes over and over for performance reasons, so we used a simple regex cache, keyed by the regex expression and its flags.
Here's the code; you'd probably namespace the functions in a utility package:
makeWrappable = function(str, position)
{
if (!str)
return '';
position = position || 15; // default to breaking after 15 chars
// matches every requested number of chars that's not whitespace or one of the special chars defined below
var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_#\\|-]{' + position + '})(?=[^\\s\\.\/\\,_#\\|-])', 'g');
return str
.replace(longRunsRegex, '$1') // put a zero-width space every requested number of chars that's not whitespace or a special char
.replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_#\|-])/g; // period, forward slash, backslash, comma, underscore, #, |, hyphen
cachedRegex = function(reString, reFlags)
{
var key = reString + (reFlags ? ':::' + reFlags : '');
if (!cachedRegex.cache[key])
cachedRegex.cache[key] = new RegExp(reString, reFlags);
return cachedRegex.cache[key];
};
cachedRegex.cache = {};
Test like this:
makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')
Update 2: It appears that zero-width spaces in fact are included in copied text in at least some circumstances, you just can't see them. Obviously, encouraging people to copy text with hidden characters in it is an invitation to have data like that entered into other programs or systems, even your own, where it may cause problems. For instance, if it ends up in a database, searches against it may fail, and search strings like this are likely to fail too. Using arrow keys to move through data like this requires (rightly) an extra keypress to move across the character you can't see, somewhat bizarre for users if they notice.
In a closed system, you can filter that character out on input to protect yourself, but that doesn't help other programs and systems.
All told, this technique works well, but I'm not certain what the best choice of break-causing character would be.
Update 3: Having this character end up in data is no longer a theoretical possibility, it's an observed problem. Users submit data copied off the screen, it gets saved in the db, searches break, things sort weirdly etc..
We did two things:
Wrote a utility to remove them from all columns of all tables in all datasources for this app.
Added filtering to remove it to our standard string input processor, so it's gone by the time any code sees it.
This works well, as does the technique itself, but it's a cautionary tale.
Update 4: We're using this in a context where the data fed to this may be HTML escaped. Under the right circumstances, it can insert zero-width spaces in the middle of HTML entities, with funky results.
Fix was to add ampersand to the list of characters we don't break on, like this:
var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_#\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_#\\|-])', 'g');
Need to set "table-layout: fixed” for word-wrap to work
HYPHENATOR is the right answer (given above). The real problem behind your question is that web browsers are still (in 2008) extremely primitive that they do not have a hyphenation-feature. Look, we are still on the early beginnings of computer usage - we have to be patient. As long as designers rule the web world we will have a hard time waiting for some real useful new features.
UPDATE:
As of December, 2011, we now have another option, with the emerging support of these tags in FF and Safari:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
I've done some basic testing and it seems to work on a recent version of Mobile Safari and Safari 5.1.1.
Compatibility table: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable
For compatibility with IE 8+ use:
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
See it here http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
All I had to do was apply this to the style of the div container with a set width.
p {
overflow-wrap: break-word;
}
#-moz-document url-prefix() {
p {
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
}
Use this
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
If you have this -
<style type="text/css">
.cell {
float: left;
width: 100px;
border: 1px solid;
line-height: 1em;
}
</style>
<div class="cell">TopLeft</div>
<div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
<div class="cell">TopRight</div>
<br/>
<div class="cell">BottomLeft</div>
<div class="cell">BottomMiddle</div>
<div class="cell">bottomRight</div>
just switch to a vertical format with containing divs and use min-width in your CSS instead of width -
<style type="text/css">
.column {
float: left;
min-width: 100px;
}
.cell2 {
border: 1px solid;
line-height: 1em;
}
</style>
<div class="column">
<div class="cell2">TopLeft</div>
<div class="cell2">BottomLeft</div>
</div>
<div class="column">
<div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
<div class="cell2">BottomMiddle</div>
</div>
<div class="column">
<div class="cell2">TopRight</div>
<div class="cell2">bottomRight</div>
</div>
<br/>
Of course, if you are displaying genuine tabular data it is ok to use a real table as it is semantically correct and will inform people using screen readers that is supposed to be in a table. It is using them for general layout or image-slicing that people will lynch you for.
I had to do the following because, if the properties were not declared in the correct order, it would randomly break words at the wrong place and without adding a hyphen.
-moz-white-space: pre-wrap;
white-space: pre-wrap;
hyphens: auto;
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
Originally posted by Enigmo: https://stackoverflow.com/a/14191114
Yeah, if it is possible, setting an absolute width and setting overflow : auto works well.
"word-wrap: break-word" works in Firefox 3.5
http://hacks.mozilla.org/2009/06/word-wrap/
Add this to css of your div: word-wrap: break-word;
after all the word wraps and breaks,
preserve your overflow and see if this solves your issue. simply change your div's display to: display: inline;
A simple function (requires underscore.js) -- based off of #porneL answer
String.prototype.shyBreakString = function(maxLength) {
var shystring = [];
_.each(this.split(' '), function(word){
shystring.push(_.chop(word, maxLength).join(''));
});
return shystring.join(' ');
};
I've written a function that works great where it inserts x letters into the word for good line breaking. All answers here did not support all browsers and devices but this works well using PHP:
/**
* Add line-break to text x characters in
* #param string $text
* #param integer $characters_in
* #return string
*/
function line_break_text($text, $characters_in = 10) {
$split = explode(' ', $text);
if ( ! empty($split)) {
foreach ($split as $key => $var) {
if ( strlen($var) > $characters_in ) {
$split[$key] = substr_replace($var, '', $characters_in, 0);
}
}
}
return implode(' ', $split);
}