CSSホワイトスペース：Cordovaアプリケーションのpreは動作しません。

私はCordovaベースのアプリケーションで作業していますが、テキストが長すぎる場合は省略記号を使用してテキストを特定の幅に制限しようとしています。ブラウザとAndroidでは、次のコードはうまくいきますが、アプリのiOSビルドでは、省略記号を取得する代わりにテキストが折り返されます。それは私のデバイス上のSafariで動作します。アプリ内だけではありません。私は、この問題はwhite-space: preスタイルに関連していると考えています。これを削除すると、他のプラットフォームでも同じ動作が示されます。このスタイルがiOSのCordovaで機能しない理由はありますか？ここでCSSホワイトスペース：Cordovaアプリケーションのpreは動作しません。

<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で実行されますが、問題はその中にあります。

Cordovaアプリケーションは、通常、ネイティブモバイルプラットフォーム内のブラウザベースの WebViewとして実装されています。 WebViewを展開するには、は各ネイティブプログラミング環境に精通している必要があります。次は、サポートされるプラットフォームのための手順を説明します。

ドキュメント：Embedding WebViews

私はあなたを助けるために願っています。幸運を祈る！

出典

2017-03-16 08:38:44

CSSホワイトスペース：Cordovaアプリケーションのpreは動作しません。

答えて

関連する問題