CSS white-space:pre in Cordova application not working
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. 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. It works in Safari on my device, just not within the app itself. I think that the issue is related to the white-space: pre style, as removing that shows the same behavior on the other platforms. Is there any reason that this style should not work within Cordova on iOS?
<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:
And on the desktop and Android (this is what I'm trying to get):
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. Any idea what's going on in Cordova?
1 answers
solution1
0 ACCPTED 2017-03-16 08:38:44
Below is my CSS class for truncate text on all platforms (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 applications are ordinarily implemented as a browser-based WebView within the native mobile platform. To deploy a WebView, you need to be familiar with each native programming environment. The following provides instructions for supported platforms:
Documentation: Embedding WebViews
I hope to help you. Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.