在iPhone上使用CSS停止Word Breaks

Question

我有Html

.xlsm

和css

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

在移动设备上没问题，但如果我使用Iphone 6或7，我就会知道：

lorem Ipsum lorem Ip -

总结......

我得到＆＃34; Ip-sum＆＃34;只使用Iphone。是否可以使用css在Iphone上停止Word Breaks？

Answer 1

在white-space:nowrap;

上试试.callout_container

Answer 2

您可以编写CSS媒体查询以定位移动设备。例如：

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

请参阅：Stop Word Breaks in CSS on iOS Mobile Safari iPhones iPads