根据其中的内容设置p元素的高度

Question

我有一个通知面板，我在其中显示最后一个通知。 但通知的内容取决于通知推送的内容。 所以这可以从非常短的消息到较长的消息。 短信显示完美，但较长的一次没有正确显示现在我写这样看起来更好：

这就是我所说的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

Answer 1

更改height: 150px到min-height: 150px用于#notification-block并重置notification-message的white-space属性：

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

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

Answer 2

请看我的小提琴。

我保持通知高度不变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默认样式。

Answer 3

将此类添加到您的css文件中：

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

小提琴

Answer 4

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

根据其中的内容设置p元素的高度

问题描述

4 个解决方案

解决方案1
3 已采纳 2016-11-30 11:34:32

解决方案2
3 2016-11-30 12:28:54

解决方案3
1 2016-11-30 11:33:54

解决方案4
1 2016-11-30 12:08:19

根据其中的内容设置p元素的高度

问题描述

4 个解决方案

解决方案1 3 已采纳 2016-11-30 11:34:32

解决方案2 3 2016-11-30 12:28:54

解决方案3 1 2016-11-30 11:33:54

解决方案4 1 2016-11-30 12:08:19

解决方案1
3 已采纳 2016-11-30 11:34:32

解决方案2
3 2016-11-30 12:28:54

解决方案3
1 2016-11-30 11:33:54

解决方案4
1 2016-11-30 12:08:19