html - 在iPhone上使用CSS停止断字

我有HTML

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

和CSS

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

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

在移动设备上可以，但是如果我使用Iphone 6或7，我会得到以下信息：

lorem ipum lorem ip-

总和...

我只能使用Iphone获得“ Ip-sum”。可以使用CSS停止Iphone上的分词吗？

最佳答案

您可以编写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

关于html - 在iPhone上使用CSS停止断字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39646976/