4

I have a div with text-align: justify which contains a few words spread out to fill the div, one of which is "Free▼". On Mozilla, "Free▼" is printed as one word, but on Chrome, it is separated into two different words, as illustrated in this fiddle: ( http://jsfiddle.net/806hjj7a/ ).

Does anyone know how I can make strings containing special characters print as one word?

<div class="justify">
  Lorem ipsum Ullamco quis ut Free▼
</div>

---

.justify {
  text-align: justify;
}
.justify:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  line-height: 0;
}
Joe Morano
  • 1,715
  • 10
  • 50
  • 114

1 Answers1

4

Wrap them in a span with display: inline-block and text-align them as needed (right or left)

http://jsfiddle.net/806hjj7a/1/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • That's a good workaround but do you know why Chrome does break it? – Kaiido May 17 '15 at 04:41
  • @Kaiido subjectivity is my best response to that -- but it is clearly a difference of method. Chrome is seeing the `▼` as a distinct "word". – aequalsb May 17 '15 at 04:44
  • @aequalsb I don't trust subjectivity about things like that, utf-8 have rules, I wonder why Chrome have this behaviour, when other softwares like e.g TextEdit don't. – Kaiido May 17 '15 at 04:46
  • @Explosion nice elegant result, because adding a ` ` didn't affect it. also, my fiddle shows the `text-align:left` is not needed. http://jsfiddle.net/aequalsb/9kgeocca/ – aequalsb May 17 '15 at 04:49
  • @Kalido utf-8 would not designate rules for discerning `▼` as a separate "word" leaving it up to the programmers subjective logic – aequalsb May 17 '15 at 04:52