Блог

Главная - Вопросы по программированию - Многострочный и размер шрифта меняется в зависимости от количества строк

Многострочный и размер шрифта меняется в зависимости от количества строк

#html #css #asp.net

#HTML #css #asp.net

Вопрос:

По какой-то причине при наличии многострочных абзацев или меток размер шрифта настраивается в зависимости от количества строк, все, что мне нужно, — это согласовывать размер шрифта независимо от строк, метки имеют точно такой же стиль css и имеют одинаковое наследование;

Это показывает проблему

 element.style {
}
@media (min-width: 320px)
.FAQAs {
    /* width: 95%; */
    padding-left: 2vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
    padding-right: 3vw;
    float: left;
    border-top-style: solid;
    border-top-color: grey;
    border-top-width: 2px;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
@media (min-width: 320px)
.FAQFontSize {
    /* font-size: 3.2vw; */
    font-size: 31.7px;
}
* {
    font-family: Verdana;
}
label[Attributes Style] {
}
user agent stylesheet
label {
    cursor: defau<
}
@media (min-width: 320px)
.bodyFontSize {
    font-size: 100%;
}

Я пробовал использовать разные единицы измерения для размера шрифта (em / px / pt и т.д.), Я пытался изменить наследование, установив родительский размер шрифта, похоже, ничего не работает

https://jsfiddle.net/4prwzt36/

это JSfiddle, однако он специфичен для мобильных устройств, поэтому я не уверен, как установить это на jsfiddle, настольная версия в порядке

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

1. сделайте ваш пример воспроизводимым. добавить html

2. ваш код работает хорошо. шрифт везде одинаков для разных размеров окна браузера. В каком браузере вы видите эту ошибку?

3. попробуйте поместить в head тег — <meta name="viewport" content="width=device-width, initial-scale=1">

4. Мне пришлось скорректировать все размеры шрифта, но это сработало! спасибо за это, могу ли я отметить комментарий в качестве ответа или вы можете опубликовать его в качестве ответа, чтобы я мог отметить его, пожалуйста

5. Я очень рад, что вам удалось решить проблему. Я дал вам ответ. Вы можете проверить.

Ответ №1:

Вставьте эту строку <meta name="viewport" content="width=device-width, initial-scale=1"> в head тег.