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

Question

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

3

我有一个通知面板，其中显示最新的通知。但通知的内容取决于通知推送的内容。因此，这可能会从非常短的消息变化到较长的消息。短消息可以完美显示，但长消息现在无法正确显示。我将其编写为以下形式以使其看起来更好：

以下是我所说的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");

正如你在代码片段中看到的一样，它使用了溢出隐藏和省略号的方式。但是我想要的是将其高度调整并换行以便能够完全显示文本。

以下是重现的代码片段

- Sireini

1

你确定这个任务需要涉及JS吗？你不能仅仅使用这些方法之一，在notification-block的垂直中心中垂直对齐notification-wrapper，然后去掉margin: 60px 10px 5px 10px;吗？ - pttsky

4个回答

3

将 #notification-block 的 height: 150px 改为 min-height: 150px，并重置 notification-message 的 white-space 属性。

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

更新的代码片段：http://jsfiddle.net/84ps035L/

- kukkuz

这是一种推送通知的样式，因此我怀疑保持它们的高度始终不变很关键，无论其中包含哪些内容... - pttsky

1

添加了我的答案，包括固定高度、垂直居中和文本省略。 - pttsky

1

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

- Kishore Kumar

1

在您的CSS文件中添加此类：

add this class to your css file:

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

- fsulser

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pttsky · Accepted Answer

请查看我的示例。

我将通知的高度保持在150像素不变。通知消息最多可以包含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默认样式。