Text Wrapping in Ionic Header

Question

I have been trying to wrap the text in my Ionic (v.3.19.0) project using the suggestions found here and here, but when I run Xcode's simulator, the text does not wrap:

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>

Note: I have tried text-wrap and style="white-space: normal;".

I also tried changing the above code from <div ...> to <ion-item text-wrap> but it causes even more CSS issues:

How can I resolve this issue?

EDIT:

Note: I am including the message that I receive when testing out the application in Xcode (v.8.1).

objc[72546]: Class PLBuildVersion is implemented in both /Users/foo_user/Downloads/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/AssetsLibraryServices (0x110610998) and /Users/foo_user/Downloads/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices (0x11039ed38). One of the two will be used. Which one is undefined. 2017-12-16 14:31:43.147 TestApp[72546:7885253] DiskCookieStorage changing policy from 2 to 0, cookie file: 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 platform version 4.5.3 is starting. 2017-12-16 14:31:43.206 TestApp[72546:7885253] Multi-tasking -> Device: YES, App: YES 2017-12-16 14:31:43.257 TestApp[72546:7885253] Using 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] Resetting plugins due to page load. 2017-12-16 14:31:44.388 TestApp[72546:7885253] ERROR Internal navigation rejected - not set for url='about:blank' 2017-12-16 14:31:44.409 TestApp[72546:7885253] ERROR Internal navigation rejected - not set for url='about:blank' 2017-12-16 14:31:44.755 TestApp[72546:7885253] Finished load of: 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

Resources being used:

cordova-plugin-inappbrowser
Angular 1.3
Bootstrap 3.3.4

We can't really help without a live example. Keep in mind you don't have to reproduce all your app here, just the relevant part for the bug. Copy/paste the relevant final markup (the one produced by Ionic, not the source). and link all required resources from CDN sources to reproduce the problem here. — tao

bruntime bruntime · Accepted Answer · 2017-12-17T08:10:42

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

Text Wrapping in Ionic Header

1 Answers