Home / Questions / 109897
Accepted
tripossi
Asked: 2020-10-17 07:16:24 +0800 CST 2020-10-17 07:16:24 +0800 CST

Перенести текст внутри кнопки

  • 772

CSS У меня есть кнопка с довольно длинным текстом:

введите описание изображения здесь

Когда размер экрана изменяется (уменьшается), он скрывает часть текста:

введите описание изображения здесь

Идея в том, что он подстраивается под ширину и отображается в несколько строк (те, которые вам нужны) не скрывая ни одного текста, не знаю, хорошо ли я объясняюсь. Я безуспешно пробовал несколько свойств CSS, буду признателен за помощь. Спасибо

Я пробовал с свойством CSS:

  • перенос слов: обычный | разрыв слова | начать | присущий;
  • дисплей: встроенный | блоки | гибкий | встроенный блок | встроенный гибкий | начать | присущий
  • переполнение-х: видимый|скрытый|прокрутка|авто|начальный|наследовать

Я вставляю текст с помощью jquery:

var texto = l.BTN_TEC;
texto += "<br /><h6 style='color: red; margin: 0;'> " + l.TEXT_BTN_TEC + "</h6>";
$("#showTecnicosBtn").html(texto);
javascript

2 Answers

  1. Best Answer

    Я оставляю вам пример, который вы можете скопировать, чтобы увидеть, с каким свойством css вы решаете свою проблему:

    <!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
#b1{
    white-space: normal;
}
</style>
</head>
<body>
<button id='b1'>
    <p>Este es un texto largo que puede estar dentro del botón</p>
</button>
</body>
</html>

    Что касается размера кнопки, если вы хотите, вы можете использовать инфраструктуру Bootstrap для поддержки вас с точки зрения отзывчивости, чтобы ваша кнопка принимала разные размеры с точки зрения разных разрешений устройств.

    • 1

  2. попробуй это,

    Ну, я не знаю, как вы пишете свою таблицу стилей, но осмелюсь ответить на этот вопрос, и я надеюсь, что это сработает для вас.

    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">

    @media(max-width:960px){
        .content {  
            width: 960px;
        }
    }

    @media(max-width:860px){
            .content {  
            width: 860px;
        }
    }

    .content {
        margin: 0 auto;
        text-align: center;

    }
</style>
</head>
<body>
    <div style="float: left;width: 100%;">
        <div class="content">
            <p>Show Techs</p>

            <p>Clearly print your name below ONLY if you have reviewthe information above and understand:</p>
            <p>1) The scope oif work</p>
            <p>2) The hazards to which you will be exposed and</p>
            <p>3) Te mitigations for those hazads</p>
        </div>
    </div>
</body>
</html>

    Просто используйте медиа для каждой настройки экрана, надеюсь, это сработает для вас.

    • 1