CSS白空间：前科尔多瓦应用程序不工作

问题描述：

我正在基于科尔多瓦的应用程序，我试图限制一些文本到特定的宽度，如果文本太长，省略号。在浏览器和Android上，下面的代码工作正常，但在应用程序的iOS版本中，文本包装而不是获取省略号。它在我的设备上的Safari中工作，不在应用程序本身内。我认为这个问题与white-space: pre风格有关，因为删除它在其他平台上显示相同的行为。这种风格是否有任何理由不适用于iOS上的Cordova？CSS白空间：前科尔多瓦应用程序不工作

<html> 
    <head> 
     <style> 
      .test-card { 
       width: 150px; 
       height: 170px; 
       background-color: white; 
       border: solid black 1px; 
       box-shadow: 3px 3px 5px #888888; 
       float: left; 
       margin: 5px; 
      } 

      .test-card .image { 
       width: 100%; 
       height: 96px; 
       background-size: cover; 
       background-repeat: no-repeat; 
       background-position: center 100%; 
       position: relative; 
      } 

      .test-card .content { 
       padding: 5px; 
      } 

      .test-card .name { 
       display: block; 
       overflow: hidden; 
       text-overflow: ellipsis; 
       white-space: pre; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="item-card" class="test-card"> 
      <div class="image" style="background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');"> 
      </div> 
      <div class="content"> 
       <span class="name">this is a really long name that should be truncated</span> 
      </div> 
     </div> 
    </body> 
</html>

这里是它的外观在iOS上：

和桌面和Android（这就是我试图让）：

到目前为止，我已经尝试了各种白色风格的选项，包括nowrap，pre-line等。我也试过包括pre标签内部的标签而不是使用white-space: pre，但所有这些选项导致相同的行为。任何想法科尔多瓦发生了什么？

如果您使用'white-space：nowrap'，行为是否会改变？ –

有趣 - nowrap刚刚为我做了窍门，但是当我今天早些时候尝试它时，它根本没有帮助。我现在必须拥有恰当的CSS组合。如果你想做出答案，我会接受它 - 谢谢！ –

答

以下是我在所有平台（Android，iOS，Windows Phone）上截断文本的CSS类。在要截断文本的元素上添加此类。

.truncate { 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
}

所有在cordova中制作的应用程序都运行在WebView中，问题在于它。

科尔多瓦应用程序通常作为基于浏览器的 WebView在本地移动平台内实现。要部署WebView，您需要熟悉每个本地编程环境。该下面提供指令支持平台：

文档：Embedding WebViews

我希望能帮助你。祝你好运！

CSS白空间：前科尔多瓦应用程序不工作

相关推荐