Пробельное пространство CSS обрезает конец входного значения текста
У меня есть список входных данных, которые я хотел бы деформировать, потому что это обрезка в конце элемента.
Поэтому я использовал свойство CSS: white-space: normal и безуспешно пробовал все остальные, потому что оно искажает не весь текст, последние части текста отсутствуют.
Вот результат без пробела:
Вот результат с пробелом:
Кто-нибудь знает, почему я получаю не полный текст, когда искажаю текст с пробелами?
Вот мой html с одним примером ввода:
<a href = "<?php echo url_for('candidature/saisirPage?id_page='. $page['id_page']) ?>">
<?php if ($culture == 'en_US' && $page['intitule_en'] != null): ?>
<input type = "button" class = "menu_description_no" value = "<?php echo $page['intitule_en'];?>" />
<?php else : ?>
<input type = "button" class = "menu_description_no" value = "<?php echo $page['intitule_fr'];?>" />
<?php endif;?>
</a>
Вот мой класс css: menu_description_no
.menu_description_no {
background:url(/sigap/web/images/with-shadows/badge-square-cross-24.png) left no-repeat;
background-color: #BBE0EA;
height: 24px;
padding: 0px 180px 0px 30px;
cursor: pointer;
//border-top-color: #1D384F;
border-bottom-color: #1D384F;
color: #284a71;
font-weight: bold;
text-align: left;
white-space:normal;
}
Обновление 2: с отступом: 0px 10px 0px 30px;
@rags2riches Вероятно, нет, этот вопрос был о ввод текста, а этот о кнопка ввода с переносом текста
Ответы 2
Вы указали фиксированную высоту 24 пикселя для .menu_description_no.
попробуйте добавить:
.menu_description_no {
background:url(/sigap/web/images/with-shadows/badge-square-cross-24.png) left no-repeat;
background-color: #bbe0ea;
min-height: 24px;
padding: 0px 180px 0px 30px;
cursor: pointer;
//border-top-color: #1d384f;
border-bottom-color: #1d384f;
color: #284a71;
font-weight: bold;
text-align: left;
white-space:normal;
}
спасибо за ваш ответ, это работает, это действительно деформируется в начале текста, как вы можете видеть, как я могу это исправить? я обновляю результат в посте
Если я правильно понял вопрос, то текст внутри input[type=button] обрезан и не красиво обтекает кнопку. Чтобы решить эту проблему, вам нужно сделать несколько вещей в вашем коде CSS:
.menu_description_no {
display: flex;
background-color: #BBE0EA;
height: auto;
width: 200px;
cursor: pointer;
border-bottom-color: #1D384F;
color: #284a71;
font-weight: bold;
text-align: center;
white-space:normal;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
</head>
<body>
<a href = "">
<input type = "button" class = "menu_description_no" value = "first Button first Button first Button first Button" />
<input type = "button" class = "menu_description_no" value = "Second Button Second Button Second Button Second Button" />
</a>
</body>
</html>Когда вы добавляете display flex к этим элементам, все внутри элемента «изгибается» и красиво оборачивается. Это в дополнение к height: auto, который автоматически подбирает высоту в зависимости от содержимого, и фиксированному width: 200px, который содержит ширину текстового содержимого внутри выбранного вами значения (200px только там для в иллюстративных целях).
Матье, Возможно это дубликат