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

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

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

Answer 2

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

.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<br>Here
</a>
</div>
</div>

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+ */