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的{{1}}更改为min-height: 150px并重置#notification-block的{{1}}属性：

white-space

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

Answer 2

请参阅我的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-mobile默认样式。

Answer 3

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

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

Fiddle

Answer 4

＆＃13;

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

＆＃13;

Text

＆＃13;

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

4 个答案: