时间戳

首页 > 解决方案 > 我可以让按钮中的文本使用换行符吗

html - 我可以让按钮中的文本使用换行符吗

问题描述

如果用户屏幕小于文本大小，如何使按钮文本以多行显示。

就目前而言，如果用户的屏幕宽度较小，则屏幕上会丢失一些文本。

    .column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      height: 42px;
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

标签： htmlcss

解决方案

添加height:auto到btn课堂

.column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      height: auto;
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

推荐阅读