Question

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

现在的情况如果用户的屏幕宽度较低，屏幕上会丢失一些文字。

    .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>

Answer 1

将height:auto添加到btn类

＆＃13;

.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%;
    }

＆＃13;

<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

＆＃13;

Answer 2

由于.btn类的固定高度为42px，因此新行不会显示，因为它会溢出元素。您可以从CSS中删除height属性，只需使用<br>即可。

＆＃13;

    .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%;
    }

＆＃13;

<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text<br>Here
      </a>
   </div>
</div>

＆＃13;

Answer 3

只需将Flex属性用于按钮类实施例

a.btn { display: flex; justify-content: center; }

Answer 4

使用下面的css来包装文本，并需要相应地调整高度和宽度。

white-space: pre-wrap; /* css-3 */    
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */    
white-space: -o-pre-wrap; /* Opera 7 */    
word-wrap: break-word; /* Internet Explorer 5.5+ */

我可以使按钮中的文本使用换行符

4 个答案: