根據裏面的內容設置p元素的高度

我有一個通知面板，顯示最後的通知。但通知的內容取決於通知推送的內容。所以這可以從很短的信息到更長的信息。短消息是完全顯示，但較長的一次，無法正確顯示現在我寫這樣更好看：根據裏面的內容設置p元素的高度

而這正是我說的是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

來源

2016-11-30 Sreinieren

你確定這個任務需要涉及JS？難道你不能直接使用[這些方法]（http://vanseodesign.com/css/vertical-centering/）中的'notification-block'中間的'notification-wrapper'來取消'margin： 60px 10px 5px 10px;'？ – pttsky

變化height: 150px到min-height: 150px爲#notification-block和重置white-space屬性notification-message：

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

更新小提琴：http://jsfiddle.net/84ps035L/

來源

2016-11-30 11:34:32 kukkuz

它是有點推式通知的樣式，所以我懷疑它是至關重要的，以保持其高度持久，無論哪些內容是在裏面... – pttsky

添加我的[回覆]（http://stackoverflow.com/a/40888388/6603253 ）固定高度，垂直居中和文字省略 – pttsky

這個類添加到您的css文件：

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

Fiddle

來源

2016-11-30 11:33:54 fsulser

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

來源

2016-11-30 12:08:19

請看看我的fiddle。

我保持通知高度不變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移動默認樣式。

來源

2016-11-30 12:28:54 pttsky

這真的很棒！但是，我現在處理的只是我已經設置了一些利潤率，你可以在這裏看到：http://jsfiddle.net/yTt9b/1779/但右邊的保證金沒有設置。 – Sreinieren

對不起，除了'margin：60px 10px 5px 10px;'之外沒有看到任何右邊距，並且此邊距變化很好，[fiddle]（http://jsfiddle.net/pttsky/765dhx01/） – pttsky

根據裏面的內容設置p元素的高度

回答

相關問題