Установить высоту элемента 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 он будет иметь переполнение скрытого ан elipsis. Но я хочу, чтобы он менял высоту и разбивал линию, чтобы прочитать все.

Здесь воссоздан FIDDLE

источник

2016-11-30 Sreinieren

Вы уверены, что эта задача требует привлечения JS? Не могли бы вы просто выровнять по вертикали свою «обертку» в середине «блока уведомлений» любым из [этих методов] (http://vanseodesign.com/css/vertical-centering/) и удалить «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

Это стиль любопытных push-уведомлений, поэтому я подозреваю, что очень важно поддерживать постоянную высоту, независимо от того, какой контент внутри ... – 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-mobile по умолчанию.

источник

2016-11-30 12:28:54 pttsky

Это действительно приятно! Но теперь дело только в том, что я установил некоторые поля, как вы можете видеть здесь: http://jsfiddle.net/yTt9b/1779/, но поле справа не устанавливается. – Sreinieren

Извините, не вижу никаких полей справа, кроме поля в строке: margin: 60px 10px 5px 10px; ', и этот запас хорошо меняется, [скрипка] (http://jsfiddle.net/pttsky/765dhx01/) – pttsky

Установить высоту элемента p на основе содержимого внутри него

ответ

Смежные вопросы