Блог

Главная - Вопросы по программированию - Псевдоним перед переносом изображения и текста

Псевдоним перед переносом изображения и текста

#css #position #word-wrap #text-alignment

#css #положение #перенос слов #выравнивание текста

Вопрос:

 p.note:before {
    content: "";
    width: 30px;
    height: 50px;
    float: left;
    margin: 0 6px 0 0;
    background: url(../images/note-icon.png) no-repeat;
}

.note {
    font-family:  arial, sans-serif !important; 
    background-color: transparent !important;
    border: 1px solid #6F1425 !important;
}

Здравствуйте,

Я пытаюсь принудительно установить вертикальную высоту псевдоэлемента ::before (изображение блокнота) перед основным текстом. Однако более длинный текст переносится под изображение, и я хочу предотвратить это. Однако попытки включить абсолютную высоту выходят за пределы / ниже элемента в другое содержимое.

Приемлемой альтернативой было бы центрирование изображения по вертикали перед текстом.

Уменьшите окно просмотра приведенного ниже примера (чтобы принудительно перенести и добавить дополнительные строки текста), чтобы понять, что я имею в виду. Спасибо

https://codepen.io/psuedobeforehelp/pen/YzGKVOB

Комментарии:

1. привет, возможно, использовать white-space: nowrap или выровнять по вертикали с table-cell помощью или flexbox ?

2. спасибо за предложения, я столкнулся с некоторыми дополнительными проблемами, связанными с необходимостью определять дочерние элементы как гибкие элементы, поэтому решил отказаться от этого.

Ответ №1:

Вы можете сделать это следующим образом. в before элемент вам просто нужно поместить этот код

 position:absolute;
left:20px;
top:50%;   // THIS LINE OF CODE HERE CENTERS THE IMAGE 
transform:translateY(-50%); // THIS LINE OF CODE HERE CENTERS THE IMAGE

И добавьте position:relative; в свой note класс, чтобы предотвратить перемещение элемента before куда-либо.

 p.note:before {
    content: "";
    width: 30px;
    height: 50px;
    margin: 0 6px 0 0;
    position: absolute;
    background: red;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.note {
    font-family:  arial, sans-serif !important; 
    background-color: transparent !important;
    border: 1px solid #6F1425 !important;
    position:relative;
    padding:20px 20px 20px 50px;
} 
 <p class="note"><span class="bold">Note</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>

Комментарии:

1. Это решило мою проблему с вертикальным пространством. Однако теперь граница проходит по всей ширине независимо от длины содержимого. Любой способ сделать это отзывчивым?

2. @psuedobeforehelp вы можете использовать display:inline-block; для .note класса или установить его width:40% or set at your own preference таким образом всякий раз, когда порт просмотра уменьшается, он все равно будет реагировать, потому что мы используем процент в width , чтобы сделать его 100% в определенных точках просмотра. Вы всегда можете использовать медиа-запрос для изменения стиля.

Метки: