Justifying a single line breaks the line before the last word in IE when last word is followed by a hyphen

Question

I have the following code:

.clJustify {
  width: 400px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid red;
  text-align: justify;
}
.clJustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Justify Test</title>
</head>

<body>
  <p class="clJustify">This is text that should be jus-</p>
  <p class="clJustify">tified and also hyphenated.</p>
</body>

</html>

Please don’t ask me why I want to do this. :-)

My problem is: In FF and Chrome this results in two lines of text that fill the space of the <p>. But IE breaks the first line before the “jus-” and puts it into a separate line. A line without a hyphen will be displayed as expected, it is the hyphen at the end that confuses IE, it seems.

Here is a screenshot from Internet Explorer:

Screenshot from IE

And here is a screenshot from Firefox:

Screenshot from FF

Any ideas how I could prevent IE from breaking the line? The suggested answers to older posts don't address the problem of the hyphen.

Okay, I am not asking you why you wanna do this, but do you wanna do this only this way? — Praveen Kumar Purushothaman, Oct 24 '15 at 15:47
If there is another way of justifying a single line, I will be grateful to know it. — Martin Auer, Oct 24 '15 at 15:49
Justify a single line? I Have an idea. Try `text-align-last`, writing you an answer with a snippet. — Praveen Kumar Purushothaman, Oct 24 '15 at 15:50
Maybe this helps: http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div — Sebastian Simon, Oct 24 '15 at 15:51
You can try using different kinds of dashes ( U+2010 to U+2015) and see if they have the same quirks... — Mr Lister, Oct 24 '15 at 16:00
@MrLister, thanks for this suggestion. `‐` works in a way, as it is not treated as a hyphen, but unfortunately in the font I am using it looks different from other hyphens in the text. `–` produces a different quirk, appart from being way too long: in this case the line is broken not before the last word, but before the dash. — Martin Auer, Oct 24 '15 at 16:52

Praveen Kumar Purushothaman · Answer 1 · 2015-10-24T15:53:19.693

1

Try text-align-last and -ms-text-align-last, this works in IE:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Justify Test</title>
    <style type="text/css">
      .clJustify{
        width: 400px;
        height: 1.5em;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid red;
        text-align: justify;
        -ms-text-align-last: justify;
        text-align-last: justify;
      }
      .clJustify:after{
        content: " ";
        display: inline-block;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <p class="clJustify">This is text that should be jus-<br>&nbsp;</p>
    <p class="clJustify">tified and also hyphenated.</p>
  </body>
</html>

edited Oct 24 '15 at 15:53

answered Oct 24 '15 at 15:51

Praveen Kumar Purushothaman

164,888
24
203
252

`text-align-last` is barely supported by newer browsers. – Sebastian Simon Oct 24 '15 at 15:53
@Xufox Agreed, for now I have used `-ms-text-align-last` and the OP already uses the `:after` fix. – Praveen Kumar Purushothaman Oct 24 '15 at 15:53
Well, thank you Praveen, this works in IE but not in FF or Chrome. Can you explain the `
`? – Martin Auer Oct 24 '15 at 16:03
@MartinAuer To be frank, I have no clue. Just tried it before and it worked. Sorry I couldn't explain why. But it is because, it forces it not to be a last line. Remove the `br` may be? – Praveen Kumar Purushothaman Oct 24 '15 at 16:03
@PraveenKumar, thank you for your effort, I really appreciate it, but I need a cross browser solution. – Martin Auer Oct 24 '15 at 16:35

Justifying a single line breaks the line before the last word in IE when last word is followed by a hyphen

1 Answers1