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，但所有這些選項導致相同的行爲。任何想法科爾多瓦發生了什麼？

來源

2017-03-15 Matt McMinn

如果您使用'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

我希望能幫助你。祝你好運！

來源

2017-03-16 08:38:44

CSS白空間：前科爾多瓦應用程序不工作

回答

相關問題