[英]CSS white-space:pre in Cordova application not working
我正在基于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上的外观:
在台式机和Android上(这就是我想要得到的):
到目前为止,我已经尝试了各种空白样式的选项,包括nowrap,pre-line等。我还尝试了在范围内包括pre
标签而不是使用white-space: pre
,但是所有这些选项都导致了同样的行为。 你知道科尔多瓦发生了什么吗?
下面是我的CSS
类,用于在所有平台(Android,iOS,Windows Phone)上截断文本。 在要截断文本的元素上添加此类。
.truncate {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
在cordova中制作的所有应用程序都在WebView中运行,问题出在其中。
Cordova应用程序通常在本机移动平台中实现为基于浏览器的WebView。 要部署WebView,您需要熟悉每个本机编程环境。 以下提供了受支持平台的说明:
文档: 嵌入WebView
希望对您有所帮助。 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.