根據其中的內容設置p元素的高度
[英]Set height of p element based on content inside it
問題描述
我有一個通知面板，我在其中顯示最后一個通知。 但通知的內容取決於通知推送的內容。 所以這可以從非常短的消息到較長的消息。 短信顯示完美，但較長的一次沒有正確顯示現在我寫這樣看起來更好：
這就是我所說的HTML：
<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>
這就是我如何動態設置通知消息的內容：
$(".notification-header").append(title);
$(".notification-message").append(message).first("p");
正如你在小提琴中看到的那樣，它將有溢出隱藏的恩賜。 但我想要的是它改變高度並打破線來閱讀全部。
這里重新創建了FIDDLE
4 個解決方案
解決方案1
3 已采納 2016-11-30 11:34:32
更改height: 150px到min-height: 150px用於#notification-block並重置notification-message的white-space屬性：
#notification-block .notification-message {
white-space:normal;
}
更新小提琴： http ： //jsfiddle.net/84ps035L/
解決方案2
3 2016-11-30 12:28:54
請看我的小提琴 。
我保持通知高度不變150px。 通知消息最多可包含3行文本，始終與中間垂直對齊：
.notification-block {
display: table;
width: 100%;
}
.notification-wrapper {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
如果有更多行，則通知消息的其余部分將被截斷並替換為省略號。
.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;
}
還有一些額外的修復來覆蓋jquery-mobile默認樣式。
解決方案3
1 2016-11-30 11:33:54
將此類添加到您的css文件中：
.notification-message{
white-space: normal !important;
overflow: visible !important;
word-break: break-word;
}
解決方案4
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>
如何根據 ReactJs 中 pdf 內容的高度設置 iframe 高度？
[英]How to set iframe height based on height of pdf content in ReactJs?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.