Kakadela Horosho Kakadela Horosho - 7 months ago 34
CSS Question

Stop Word Breaks using CSS on iPhones

I have Html

<div class="callout-container req-text dark-callout">
<div class="col-md-12 callout-description">Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>

And css

@media (max-width: 500px){
.callout-container {
max-width: 300px;
padding: 5px;

.dark-callout .callout-description {
color: #fff;
font-size: 28px;
font-weight: bold;

It's ok on mobile devices, but if I use Iphone 6 or 7 I get this:

lorem Ipsum lorem Ip-

sum ...

I get "Ip-sum" only using Iphone. Is it possible to stop Word Breaks on Iphone using css ?


You can write a CSS media query to target mobile devices. For example:

@media only screen (max-device-width : 667px) {
  .callout_container {

See: Stop Word Breaks in CSS on iOS Mobile Safari iPhones iPads