How to Use CSS to Justify Text with Hyphenating Words at The End of a Line

Can I use CSS to justify text with hyphenating words at the end of a line?

You can use hyphens: auto provided that you have declared the content language in HTML, e.g. using <html lang=en-US>.

Browser support is still limited but getting better, see
http://caniuse.com/css-hyphens

For good quality, you may need to manually control hyphenation e.g. by using soft hyphens () in words that might otherwise be hyphenated wrong.

CSS text align justify big spaces

Consider using hyphenation (manual, CSS, server-side, or client-side JavaScript), see e.g. answers to Can I use CSS to justify text with hyphenating words at the end of a line?
Hyphenation tends to help a lot when there are long words in the text.

You can still keep text-justify: distribute, as it can improve the result on supporting browsers, and it can be expected to gain support, as it in the CSS standardization track (in CSS Text Module Level 3 WD).

css break word with hyphen

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

.content {  max-height: 80px;  width: 200px;  overflow-x: hidden;  word-wrap: break-word;  padding: 10px;  font-weight: bold;  font-size: 16px;  border: solid 1px #000;}

Using soft hyphen:<div class="content">BERUFSBILDUNGSZENTRUM</div>    
Using automatic hyphenation (doesn't work in Chrome)<div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div>
Soft hyphen not displayed if it doesn't break there<div class="content" style="width: 400px; ">BERUFSBILDUNGSZENTRUM</div>

How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

Finally, I found solution myself. Sorry Rounin and Oriol for taking so much of your time and thanks a lot for your genuine effort to help me. As I mentioned, I needed leading hyphen, space and the first word to be treated as a single word. Therefore, no need for any styling or special lists, but simply to use – or similar:

<!DOCTYPE HTML><html>
<head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding">
 <style>     p { margin-top: 0; margin-bottom: 0; text-align: justify; } </style></head>
<body> <p>– Good morning, Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-Ian-Jake-Keith-Lachlan.</p> <p>– Good morning, Alex-Ben-Charlie-David-Eugene-Frederick, George-Harry-Ian-Jake-Keith-Lachlan-Mark.</p> <p>– Good morning, Mr. Pickwick.</p></body></html>

Justify the last line of a div?

Here's a cross-browser method that works in IE6+

It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

If you have one line of text, use this to prevent the blank line the above CSS will cause

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

More details:
http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

Should I avoid using text-align: justify;?

Firstly, this is purely a design-related problem and solution. The design of your grid specifies if justifying text is needed. I think justify align alone has no major effect on usability. Bad typography that makes text illegible is what decreases usability. That said, make sure you have solid contrasts and a good balance of spacing in your type. Font-size matters too.

This site is a successful attempt at justifying text online. Since you can't control the spaces between letters and words nearly as much with CSS as you can with InDesign, it's a lot harder to justify text and not have 'rivers' of whitespace run down your rows, which happens when the spaces between words exceeds the spaces between lines. Things that make justifying text difficult: long words, row widths that don't hold enough words, and too much contrast between the text and the background colors; they make the rivers appear wider and more apparent.

The typographic ideal is to have an even text-block, where if you squint the text block becomes a uniform solid shade. So if you keep text at about 10px and 60% gray on white background, and have rows that fit about 20 words, justify align shouldn't look ugly. But keep in mind this does nothing to improve usability. Small, relatively light text annoys a lot of people, especially the older readers.

I should note that with (soft hyphenation) correctly separating long troublesome words like superawesome you can mimic proper typesetting (e.g. InDesign). There's a lot of stuff out there to help you do this. I would recommend the logic for hiding, manipulating, and displaying the text to be done on the client side, perhaps with this.

Edit: As others mention below, css hyphens are possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.

After word break, align next line to the left rather than center

You can use text-align-last

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.
^MDN

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
  text-align-last: left;
  border: 1px solid red;
}

<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>

How can I justify the text or make it stop separating the words in a UITextview?

You Just need to add one line code in your textView code.

textView.textContainer.lineBreakMode = NSLineBreakByWordWrapping;

One letter word on the end of line (justify)

If you use a NO-BREAK SPACE U+00A0 between two words, instead of normal whitespace (like space or line break), browsers will keep those words together, on one line. Example:

"Hello my name is John Smith, and I am
a freshman!"

Here I have used the named character reference , but you can also use the NO-BREAK SPACE itself if you know how to type it in your authoring environment and have properly declared the character encoding. In most editing programs, NO-BREAK SPACE looks just like a normal space.

This is independent of text justification. In the old days, browsers used to treat NO-BREAK SPACE as non-stretchable in justification. But nowadays it is treated like space in justification, i.e. it gets its share of added spacing.

If you’d like to have a non-breaking non-stretchable space between words, you’d need a more complicated approach. You would use U+2005 FOUR-PER-EM SPACE or some other fixed-width space and you wrap the words in an element where line breaking is forbidden with HTML or CSS. For example, instead of I am you would write <nobr>I am</nobr> or, more clumsily but conforming to “standards”, <span style="white-space: nowrap">I am</span>. There is no guarantee that this will work in the future, though; there is no requirement in specifications that browsers support fixed-width characters this way (but this is a simple and natural implementation, and the current one).