文字包裹在离子标题中

Question

我一直在尝试使用找到的here和here的建议将文本包装在我的Ionic（v.3.19.0）项目中，但是当我运行Xcode的模拟器时，文本没有换行：

index.html的：

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/script.js"></script>
<script src="angular-bootstrap/ui-bootstrap.js"></script>
<script src="angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

<div class="bar bar-header bar-positive" style="height: 80px;" style="white-space: normal;">
    <h1 class="title">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h1>
</div>

<div class="bar bar-subheader bar-stable" style="height: 80px;" style="white-space: normal;">
    <h2 class="title">Phasellus sodales urna a
        <a href onclick="window.open('https://www.google.com', '_system');">tellus luctus sodales.</a>
        Donec non sagittis ex, a aliquam magna.</h2>
</div>

注意：我尝试过text-wrap和style="white-space: normal;"。

我也尝试将上面的代码从<div ...>更改为<ion-item text-wrap>，但它会导致更多的CSS问题：

我该如何解决这个问题？

编辑：

注意：我在Xcode（v.8.1）中测试应用程序时包含了我收到的消息。

objc [72546]：类PLBuildVersion在/Users/foo_user/Downloads/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/中实现。 AssetsLibraryServices（0x110610998）和/Users/foo_user/Downloads/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices(0x11039ed38）。将使用两者之一。哪一个未定义。 2017-12-16 14：31：43.147 TestApp [72546：7885253] DiskCookieStorage将策略从2更改为0，cookie文件：file：/// Users / foo_user / Library / Developer / CoreSimulator / Devices / 1234Z678-1234-123Y- 1X34-123456789012 / data / Containers / Data / Application / ZZ34Z678-1234-123W-VX34-UQ34567R9012 / Library / Cookies / com.barcodescanner.binarycookies 2017-12-16 14：31：43.205 TestApp [72546：7885253] Apache Cordova native平台版本4.5.3正在启动。 2017-12-16 14：31：43.206 TestApp [72546：7885253]多任务处理 - >设备：是，应用程序：是2017-12-16 14：31：43.257 TestApp [72546：7885253]使用UIWebView 2017-12- 16 14：31：43.258 TestApp [72546：7885253] [CDVTimer] [console] 0.039995ms 2017-12-16 14：31：43.258 TestApp [72546：7885253] [CDVTimer] [handleopenurl] 0.098050ms 2017-12-16 14 ：31：43.259 TestApp [72546：7885253] [CDVTimer] [intentandnavigationfilter] 0.923038ms 2017-12-16 14：31：43.260 TestApp [72546：7885253] [CDVTimer] [gesturehandler] 0.064969ms 2017-12-16 14:31 ：43.260 TestApp [72546：7885253] [CDVTimer] [TotalPluginStartup] 1.860023ms 2017-12-16 14：31：44.256 TestApp [72546：7885253]由于页面加载而重置插件。 2017-12-16 14：31：44.388 TestApp [72546：7885253]错误内部导航被拒绝 - 未设置为url ='about：blank'2017-12-16 14：31：44.409 TestApp [72546：7885253] ERROR内部导航拒绝 - 未设置为url ='about：blank'2017-12-16 14：31：44.755 TestApp [72546：7885253]已完成加载：file：/// Users / foo_user / Library / Developer / CoreSimulator / Devices / 1234Z678 -1234-123Y-1X34-123456789012 /数据/容器/捆绑/应用/ 12345678-1SD4-123W-K34-1N3P567890J2 / TestApp.app / WWW / index.html中

使用的资源：

• 科尔多瓦 - 插件，inappbrowser
• Angular 1.3
• Bootstrap 3.3.4

Answer 1

Ionic目前不支持其标题中的以下内容：

• text-wrap
• style="white-space: normal;"
• white-space: normal;

解：

<div class="card">
    <div class="item item-divider item-assertive" style="white-space: normal;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="item item-text-wrap">
        <h2 class="title">Phasellus sodales urna a
        <a href onclick="window.open('https://www.google.com', '_system');">tellus luctus sodales</a>.
        Donec non sagittis ex, a aliquam magna.</h2>
    </div>
</div>

输出：

资源：

https://github.com/ionic-team/ionic/issues/9702