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 属性：

  • 自动换行：正常 | 断字| 开始 | 固有;
  • 显示：内联 | 块 | 弹性 | 内联块 | 内联弹性 | 开始 | 固有
  • 溢出-x：可见|隐藏|滚动|自动|初始|继承

我使用 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