Kakadela Horosho Kakadela Horosho - 2 months ago 10
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>
</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 ?

Answer

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

@media only screen (max-device-width : 667px) {
  .callout_container {
    word-break:keep-all;
  }
}

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

Comments