CSS空白：Cordova应用程序中的pre不起作用

Question

I'm working within a Cordova based application, and I'm trying to restrict some text to a specific width, with ellipsis if the text is too long. 我正在基于Cordova的应用程序中工作，并且尝试将某些文本限制为特定宽度，如果文本太长，则使用省略号。 In the browser and on Android, the following code works fine, but in the iOS build of the app the text wraps instead of getting the ellipsis. 在浏览器和Android上，以下代码可以正常工作，但在应用程序的iOS版本中，文字会自动换行而不是省略号。 It works in Safari on my device, just not within the app itself. 它可以在我设备上的Safari中运行，而不能在应用程序本身中运行。 I think that the issue is related to the white-space: pre style, as removing that shows the same behavior on the other platforms. 我认为问题与white-space: pre样式有关，因为删除该样式会在其他平台上显示相同的行为。 Is there any reason that this style should not work within Cordova on iOS? 有什么理由不能在iOS的Cordova中使用这种样式？

<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>

Here's how it looks on iOS: 这是在iOS上的外观：

And on the desktop and Android (this is what I'm trying to get): 在台式机和Android上（这就是我想要得到的）：

So far I've tried various options for the white-space style, including nowrap, pre-line, etc. I've also tried including pre tags inside the span instead of using white-space: pre , but all of those options resulted in the same behavior. 到目前为止，我已经尝试了各种空白样式的选项，包括nowrap，pre-line等。我还尝试了在范围内包括pre标签而不是使用white-space: pre ，但是所有这些选项都导致了同样的行为。 Any idea what's going on in Cordova? 你知道科尔多瓦发生了什么吗？

Answer 1

Below is my CSS class for truncate text on all platforms (Android, iOS, Windows Phone). 下面是我的CSS类，用于在所有平台（Android，iOS，Windows Phone）上截断文本。 Add this class on element which you want truncate text. 在要截断文本的元素上添加此类。

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

All the apps made in cordova run in a WebView the problem is in it. 在cordova中制作的所有应用程序都在WebView中运行，问题出在其中。

Cordova applications are ordinarily implemented as a browser-based WebView within the native mobile platform. Cordova应用程序通常在本机移动平台中实现为基于浏览器的WebView。 To deploy a WebView, you need to be familiar with each native programming environment. 要部署WebView，您需要熟悉每个本机编程环境。 The following provides instructions for supported platforms: 以下提供了受支持平台的说明：

Documentation: Embedding WebViews 文档：嵌入WebView

I hope to help you. 希望对您有所帮助。 Good luck! 祝好运！

CSS空白：Cordova应用程序中的pre不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-16 08:38:44

CSS空白：Cordova应用程序中的pre不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-16 08:38:44

解决方案1
0 已采纳 2017-03-16 08:38:44