Html button перенос строки

How to Create Button with Line Breaks

Buttons are generally created with the help of the HTML , , or tags.

While creating buttons, you may need to add a line break when your button contains a long text.

The ways of adding a line break

The easiest way to have a line break is using the tag on your text. It is used for inserting a single line break.

Example of creating a button with a line break by using the
tag:

html> html> head> title>Title of the document title> head> body> h1>Button with line break h1> button type="submit">Mybr />Button button> body> html>

Result

Another way of adding a line break is using the CSS word-break property, which specifies how words should break when reaching the end of a line. Put your button text in a element and give styling to it. Use the «keep-all» value of the word-break property and set the width.

Example of creating a button with a line break by using the word-break property:

html> html> head> title>Title of the document title> style> span < display: block; width: 50px; padding: 0 20px; margin: 0; word-break: keep-all; text-align: center; > style> head> body> h1>Button with word-break h1> button type="submit"> span>My Button Example span> button> body> html>

A different way of adding a line break is using the flex-wrap property with its «wrap» value, which defines that the flexible items will wrap where needed. Here also you need to set the width property for your button.

Example of creating a button with a line break by using the flex-wrap property:

html> html> head> title>Title of the document title> style> .btn < display: flex; flex-wrap: wrap; width: 80px; padding: 10px; > style> head> body> h1>Button with flex-wrap h1> button class="btn" type="submit">My Button Example button> body> html>

Let’s see another example, where we use additional styling and onclick attribute for our button.

Example of creating a styled button with a line break:

html> html> head> title>Title of the document title> style> .btn < display: inline-block; padding: 10px 25px; margin: 4px 2px; background-color: #1c87c9; border: 3px solid #095484; border-radius: 5px; text-align: center; text-decoration: none; font-size: 20px; color: #fff; cursor: pointer; > style> head> body> button class="btn" onclick="window.location.href='https://www.w3docs.com';" type="submit"> Click br />Me! button> body> html>

Example of adding a line break within a button created with the HTM tag:

html> html> head> title>Title of the document title> style> .btn < display: flex; flex-wrap: wrap; cursor: pointer; width: 50px; padding: 10px; text-decoration: none; background-color: lightblue; text-align: center; border-radius: 10px; > style> head> body> h1>Button with the <a> tag h1> a class="btn" href="https://www.w3docs.com/learn-git.html">Learn Git a> body> html>

In the following example, we use the white-space property with the «normal» value and set the word-wrap property to «break-word».

Example of adding a line break within a button created with the HTM tag:

html> html> head> title>Title of the document title> style> .btn < display: inline-block; width: 110px; white-space: normal; word-wrap: break-word; padding: 15px 25px; margin: 10px; background-color: lightblue; border: 2px solid #56a9de; border-radius: 5px; text-align: center; outline: none; font-size: 18px; color: #ffffff; cursor: pointer; > style> head> body> input type="button" class="btn" value="Some text" /> body> html>

Источник

Перенос текста на кнопке | CSS

Первый вариант позволяет сделать так, чтобы ширина кнопки не превышала ширину родителя («резиновая, сужающаяся кнопка»), а её содержимое переносилось на новую строку при необходимости.

Тег button

11111111111111111111111111111111111111111111111
 style="word-break: break-all;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="white-space: pre-line;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="overflow-wrap: break-word;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="word-wrap: break-word;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;">11111111111111111111111111111111111111111111111

11111­111111111111111111111111111111111111111111
 11111­111111111111111111111111111111111111111111

11111​111111111111111111111111111111111111111111
 11111​111111111111111111111111111111111111111111

Источник

Wrapping an HTML input button’s text value over multiple lines

How do I move text to a new line in an HTML input element with the type=»button» attribute? I have following code:

I want the button’s text value to be wrapped in two lines. I tried typing it into the next line in HTML. It didn’t work as I expected:

I also tried using all options of white-space with fixed width: 200px; , but still nothing works. I am OK with statically fixing the length, width, or other values: as the control is not going to change.

6 Answers 6

Try this, you can see how it works instantly:

For anyone reading this question 4 years later, I would like to add some clarifying details. Lokesh’s answer is the correct one (not the accepted answer), but the initial question is based on a misunderstanding of how HTML works, which no one has addressed.

HTML is not a white-space significant language. That is, any new lines are completely ignored by the browser. While you can (and should!) put new lines in your HTML code in order to write readable, maintainable HTML, it will (almost) never affect the end result (I won’t get into exceptions here).

As Lokesh indicated, you can use the
tag to force a new line. Another common way is to use block level elements, such as div or section .

. Also text «blocks» like

and . Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

This is a quote from https://css-tricks.com/almanac/properties/d/display/, which is a very good reference on the different properties for the display attribute.

Additionally, I don’t recommend trying to use any of the other suggested solutions which require putting encoded newline symbols inside the value attribute. This is pushing the input tag beyond was it was designed for. If you need more complex content for a button, the button tag is more appropriate. In fact, I generally don’t think there’s ever good reason to use instead the button tag. It’s much more semantic, easier to read, and is infinitely more flexible — for example, in allowing breaks and other elements (such as images!) inside it.

Just a bit of knowledge and a few recommendations from a professional web developer. 🙂

Источник

Как перенести строку в value?

Есть input type=»submit» value=». » Как сделать перенос строки в value? Сама строка value — «Получить консультацию» в модальном окне. Слева от этого инпута еще два поля для ввода имени и почты. Строка уползает за границы кнопки.

Это и так ясно. Нельзя там button прописать. Код кривой очень, формы написаны таблицами, какой-то укурок страницу делал. Кнопки были вообще прописаны с помощью , которые ничего не делали.

Алексей Уколов: Сделал button но она смещается вниз относительно полей, манипуляции с margin-top игнорируются.

Алексей Уколов: Да, надо было сразу выложить. Сайт делался с использование Bootstrap, не знаю, на кой черт автору потребовались таблицы в формах.

 
 
 
 
    Получить
консультацию Получить консультацию -->
 
 
 

Инлайн-стили я стараюсь не использовать, но тут почему-то стили из внешнего файла работают почему-то не всегда, пришлось вставлять внутри тэга, учитывая их приоритетность.

Источник

HTML тег

Содержимое тега пишется между открывающим и закрывающим тегами.

Пример

html> html> head> title>Заголовок документа title> head> body> h1>Вот наша кнопка.. h1> button type="button">Нажать button> body> html>

Результат

Использование CSS стилей

К тегу можно применять CSS стили для изменения внешнего вида кнопки, ее размера, цвета, шрифта текста и т.д.

Пример

html> html> head> title>Заголовок документа title> head> body> Обычная кнопка button type="button">Добавить в корзину button> hr /> Кнопка с красным текстом button type="button" style="color: red;">b>Книга HTML b> button> hr /> Кнопка с увеличенным размером шрифта button type="button" style="font: bold 14px Arial;">Загрузить книгу button>br /> body> html>

Результат

Атрибуты

У тега нет обязательных атрибутов, однако мы рекомендуем всегда использовать атрибут type=”button”, если тег используется в качестве обычной кнопки.

Атрибут	Значение	Описание
autofocus	autofocus	Указывает браузеру, что кнопка должна получить фокус после загрузки страницы.
disabled	disabled	Деактивирует кнопку. (Используется в случае, когда кнопка должна стать активной после выполнения какого-либо действия.)
form	form_id	Указывает форму, к которой относится кнопка. Если кнопка относится к нескольким формам, то их идентификаторы (form_id) должны быть разделены пробелами.
formaction	URL	Задаёт адрес, куда будут пересылаться данные формы при нажатии на кнопку. (Используется только для кнопок с атрибутом type=»submit»).
formenctype	application/x-www-form- urlencoded multipart/form-data text/plain	Определяет способ кодирования данных формы перед отправкой на сервер. (Используется только для кнопок с атрибутом type=»submit»). все символы кодируются перед отправкой (значение по умолчанию). символы не кодируются пробелы заменяются знаком «+», но символы не кодируются.
formmethod	Указывает метод HTTP запроса, который будет использован при отправке данных формы. (Используется только для кнопок с атрибутом type=»submit»)
	get	Передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
	post	Браузер устанавливает связь с сервером и посылает данные для обработки.
formnovalidate	formnovalidate	Отменяет проверку данных формы на корректность. (Используется только для кнопок с атрибутом type=»submit»).
formtarget	Указывает, где показывать ответ после отправки формы. (Используется только для кнопок с атрибутом type=»submit»).
	blank	открывает ответ в новом окне.
	self	открывает ответ в текущем окне.
	parent	открывает ответ в родительском фрейме.
	top	открывает ответ во всю ширину окна.
name	name	Определяет имя кнопки.
type	Определяет тип кнопки.
	button	обычная кнопка
	reset	кнопка, которая очищает форму от введенных данных
	submit	кнопка для отправки данных формы
value	text	Устанавливает значение кнопки.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник