I have a notification panel where I show the last notification. But the content of the notification depends on what the notification pushes. So this can vary from a very short message to a longer one. The short message are shown perfectly but the longer once are not shown correctly now I wrote it like this to look better:

And this is the HTML where I am talking about:

<div data-role="content" class="ui-content">
  <ul data-role="listview">
   <li id="notification-block">
   <img class="notification_bell" src="img/icons/alert.png">
    <div class="notification-wrapper">
       <h2 class="notification-header"></h2>
         <p class="notification-message"></p>
         <p class="read-more">
          <a href="#all" style="text-decoration: none" data-transition="slide">
           Meer <span class="fa fa-angle-right carot"></span>
          </a>
         </p>
        </div>
      </li>
    </ul>
</div>

And this is how I set the content of the notification message dynamically:

    $(".notification-header").append(title); 
    $(".notification-message").append(message).first("p"); 

As you see in the Fiddle it will have overflow hidden en elipsis. But What I want is that it changes the height and break the line to read it all.

Here is recreated FIDDLE

I have a notification panel where I show the last notification. But the content of the notification depends on what the notification pushes. So this can vary from a very short message to a longer one. The short message are shown perfectly but the longer once are not shown correctly now I wrote it like this to look better:

And this is the HTML where I am talking about:

<div data-role="content" class="ui-content">
  <ul data-role="listview">
   <li id="notification-block">
   <img class="notification_bell" src="img/icons/alert.png">
    <div class="notification-wrapper">
       <h2 class="notification-header"></h2>
         <p class="notification-message"></p>
         <p class="read-more">
          <a href="#all" style="text-decoration: none" data-transition="slide">
           Meer <span class="fa fa-angle-right carot"></span>
          </a>
         </p>
        </div>
      </li>
    </ul>
</div>

And this is how I set the content of the notification message dynamically:

    $(".notification-header").append(title); 
    $(".notification-message").append(message).first("p"); 

As you see in the Fiddle it will have overflow hidden en elipsis. But What I want is that it changes the height and break the line to read it all.

Here is recreated FIDDLE

• javascript
• jquery
• html
• css

• 1 You sure this task requires involving JS? Couldn't you just align vertically your notification-wrapper in the middle of notification-block with any of these methods and remove margin: 60px 10px 5px 10px;? – pttsky Commented Nov 30, 2016 at 11:34

4 Answers 4

Please see my fiddle.

I kept notifications height of constant 150px. Notification messages can contain up to 3 lines of text, always kept aligned vertically to middle:

.notification-block {
  display: table;
  width: 100%;
}

.notification-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

If there are more lines, the rest of notification message is truncated and replaced with ellipsis.

.notification-message {  
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  font-size: 13px;
  line-height: 19px;
  max-height: 57px; /* 3 lines of height 19 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

There are also some additional fixes to override jquery-mobile default styling.

Change height: 150px to min-height: 150px for #notification-block and reset the white-space property for notification-message:

#notification-block .notification-message {
    white-space:normal;
}

Updated fiddle: http://jsfiddle/84ps035L/

add this class to your css file:

.notification-message{
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word;
}

Fiddle

.notification-wrapper {
  position: relative;
  left: -10px;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: 0.6px;
}
#notification-block {
  height: 150px;
  border-radius: 5px;
  margin: 60px 10px 5px 10px;
  background-color: #ffffff;
}
#notification-block h2 {
  margin-top: 45px;
}
#notification-block img {
  margin-top: 50px;
}
.notification-message {
  white-space: normal !important;
}
.read-more,
.read-more a {
  float: right;
  font-weight: bold !important;
  font-size: 16px !important;
  color: black !important;
  text-decoration: none !important;
}

<!DOCTYPE html>
<html>

<head>
  <title>JQM latest</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery./mobile/git/jquery.mobile-git.css">
  <script src="http://code.jquery./jquery-1.10.2.js"></script>
  <script src="http://code.jquery./mobile/git/jquery.mobile-git.js"></script>
</head>

<body>
  <div data-role="content" class="ui-content">
    <ul data-role="listview">
      <li id="notification-block">
        <img class="notification_bell" src="https://cdn1.iconfinder./data/icons/trycons/32/bell-512.png">
        <div class="notification-wrapper">
          <h2 class="notification-header">Gate update</h2>
          <p class="notification-message">This is a very long message and will not shown properly because this is way to long for the wrapper</p>
          <p class="read-more">
            <a href="#all" style="text-decoration: none" data-transition="slide">
                    Meer <span class="fa fa-angle-right carot"></span>
                    </a>
          </p>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>