CSS white-space:pre 在 Cordova 应用程序中不起作用

Posted

技术标签:

【中文标题】CSS white-space:pre 在 Cordova 应用程序中不起作用【英文标题】:CSS white-space:pre in Cordova application not working 【发布时间】:2017-03-15 16:57:41 【问题描述】:

我在基于 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,但所有这些选项导致相同的行为。知道科尔多瓦发生了什么吗?

【问题讨论】:

如果你使用white-space: nowrap,行为会改变吗? 有趣 - nowrap 刚刚为我做了诀窍,但是当我今天早些时候尝试它时,它根本没有帮助。我现在必须拥有正确的 CSS 组合。如果你想回答这个问题,我会接受 - 谢谢! 【参考方案1】:

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

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

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

Cordova 应用程序通常作为基于浏览器的 原生移动平台内的 WebView。要部署 WebView,您 需要熟悉每个原生编程环境。这 以下提供了支持平台的说明:

文档:Embedding WebViews

希望能帮到你。 祝你好运!

【讨论】:

以上是关于CSS white-space:pre 在 Cordova 应用程序中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

pre标签中内容超出时换行

IE9 空白 css 和对齐

pre标签

pre标签

CSS强制英文换行

vuex—table表头不自动换行了