CSS white-space:Cordova应用程序中的pre不工作

时间:2017-03-15 16:57:42

标签: html ios css cordova

我在基于Cordova的应用程序中工作,我正在尝试将某些文本限制为特定宽度,如果文本太长则使用省略号。在浏览器和Android上,以下代码工作正常,但在应用程序的iOS版本中,文本包装而不是获取省略号。它在我的设备上的Safari中工作,而不是在应用程序本身内。我认为该问题与white-space: pre样式有关,因为删除在其他平台上显示相同的行为。有没有理由说这种风格在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>

以下是它在iOS上的外观:

iOS

在桌面和Android上(这是我想要的):

Android image

到目前为止,我已尝试过各种白色空间样式选项,包括nowrap,pre-line等。我还尝试在span中包含pre标签,而不是使用white-space: pre ,但所有这些选项都导致了相同的行为。知道科尔多瓦发生了什么事吗?

1 个答案:

答案 0 :(得分:0)

以下是我的CSS类,用于在所有平台(Android,iOS,Windows Phone)上截断文本。在要截断文本的元素上添加此类。

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

所有在cordova中制作的应用程序都在WebView中运行,问题出在其中。

  

Cordova应用程序通常以基于浏览器的方式实现   本机移动平台中的WebView。要部署WebView,您需要   需要熟悉每个本机编程环境。该   以下提供了支持平台的说明:

文档:Embedding WebViews

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