离子标题中的文字换行

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 /数据/容器/数据/应用/ ZZ34Z678-1234-123W-VX34-UQ34567R9012 /库/曲奇/ com.barcodescanner.binarycookies   2017-12-16 14：31：43.205 TestApp [72546：7885253] Apache Cordova原生平台版本4.5.3正在启动。   2017-12-16 14：31：43.206 TestApp [72546：7885253]多任务 - ＆gt;设备：是，应用：是   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]错误内部导航被拒绝 - 未设置为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 / data / Containers /Bundle/Application/12345678-1SD4-123W-K34-1N3P567890J2/TestApp.app/www/index.html

正在使用的资源：

• cordova-plugin-inappbrowser
• Angular 1.3
• Bootstrap 3.3.4

Answer 1

Ionic does not currently support the following in its headers:

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

Solution:

<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>

Output:

Resource:

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