#html #css #flexbox #word-break
#HTML #css #flexbox #разрыв слова
Вопрос:
Я пытаюсь получить текст «да, пожалуйста» в одной строке. Я хочу, чтобы он был выровнен точно так. Однако он отображается в двух строках.
<section class="contactus">
<div class="contactustitle">
<h1>Where happy to hear from you</h1>
<ion-icon style="width: 100%;" name="remove-outline"></ion-icon>
</div>
<div class="contactusinput" style="width: 60%">
<div class="name">
<p>Name</p> <input style="width: 70%;" placeholder="Your name" type="text"> </div>
<div class="email">
<p>Email</p> <input type="text" placeholder="Email" style="width: 70%;"> </div>
<div class="refer">
<p>How did you find us? </p> <input type="text" placeholder="Your erfferer" style="width: 70%;"> </div>
<div style="border: 1px solid red; width: 42%;">
<p>Newsletter?</p>
<div style="display: inline-flex; border: 1px solid red;"><input type="checkbox" name="" id="">yes, please</div>
</div>
<div>
<p>drop us a line</p> <input type="textarea" placeholder="Your message" style="width: 70%; height: 100px;" style=""> </div>
<div style=" display: flex; justify-content: center;"><button style="width: 20%; padding: 10px; border: 1px solid #e67e22; border-radius: 200px; background-color: #e67e22; color: #ffff; font-weight: 300;">Send it!</button></div>
</div>
</section>
Ответ №1:
Помимо всех CSS и встроенных стилей, которые можно придумать, в данной конкретной ситуации (т. Е. Всего Два коротких слова) Самый простой способ добиться этого — поместить HTML-объект «неразрывный пробел» между словами «да» и «пожалуйста» вместо обычного пробела. Таким образом, вместо «да, пожалуйста» ваш текст (в коде) будет yes,amp;nbsp;please
Комментарии:
1. это, казалось, сняло флажок?
2. нет, это невозможно — вы, должно быть, сделали что-то еще, чтобы вызвать это. Или же контейнер оказался слишком узким, и что-то обрезано сбоку (проверьте с помощью инструментов браузера)
3. Хм, нет, это было единственное, к чему я прикоснулся?
4. извините, но это действительно невозможно