使文本适合按钮答案

【问题标题】：Fit Text into Button使文本适合按钮
【发布时间】：2019-05-02 17:26:43
【问题描述】：

我正在使用引导程序和 JavaScript 进行测验。

按钮中的文本有时比按钮的正文长，在移动设备上文本不适合按钮，因此我们无法阅读文本。如何使文本适合按钮主体？谢谢！。

<button id="answer_a_btn" class="answer btn     btn-default btn-lg btn-block" role="button">
                       <span><p id="answer_a" style="width: 100%"></p></span>
			       </button>
<button id="answer_b_btn" class="answer btn btn-default btn-lg btn-block" role="button">
                           <span><p id="answer_b" style="width: 100%">    </p></span>
			       </button>
<button id="answer_c_btn" class="answer btn btn-default btn-lg btn-block" role="button">
                       <span max-width: 100%><p id="answer_c" style="width:   100%"></p></span>
		           </button>

【问题讨论】：

你的问题有点不清楚。但尝试将宽度设置为像素而不是百分比
指定您的字体大小。进行精确的宽度调整。添加填充。
避免将您的<p> 答案也包含在<span> 标记中；这不是真正有效的 HTML。您可以轻松地将id 属性添加到<span>。

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

使用媒体查询来调整 font-size 或使用动态值来调整字体大小，例如 vw 或使用插件，例如 succinct

【讨论】：

【解决方案2】：

尝试使用像素代替：

style="width: 200px;"

【讨论】：

【解决方案3】：

尝试使用bootstrap额外的小按钮

可能会帮助你看看代码 sn-p:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button</h2>
  <p>The .btn-xs class makes extra small buttons:</p>            
  <button type="button" class="btn btn-default btn-xs">Extra small Default Button</button>
  <button type="button" class="btn btn-info btn-xs">Extra small Info Button</button>      
</div>

</body>
</html>

【讨论】：