Set height of p element based on content inside it
Question
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
4 answers
solution1
3 ACCPTED 2016-11-30 11:34:32
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.net/84ps035L/
solution2
3 2016-11-30 12:28:54
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.
solution3
1 2016-11-30 11:33:54
add this class to your css file:
.notification-message{
white-space: normal !important;
overflow: visible !important;
word-break: break-word;
}
solution4
1 2016-11-30 12:08:19
.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.com/mobile/git/jquery.mobile-git.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/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.com/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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.