我有一个响应式网格和按钮容器,它出现在许多不同的页面上,每个页面上的文本长度不同。
我不想要文本换行,所以我在按钮上使用了 white-space: nowrap
。
问题是,对于较长的文本,例如 save and continue
,文本会被截断。
无论父容器的宽度如何,文本都可以扩展到所需的数量吗?
我可以在按钮上使用 width: auto
但这在较低的分辨率下会分崩离析。
.wrapper {
margin: 0 auto;
padding: 0 15px;
}
.grid {
list-style: none;
margin: 0;
padding: 0;
margin-left: -30px;
}
.grid__item {
display: inline-block;
padding-left: 30px;
vertical-align: top;
width: 100%;
box-sizing: border-box;
}
.application-layout__container__right {
float: right;
}
.one-half {
width: 50%;
}
button {
width: 100%;
white-space: nowrap;
border: 1px solid #0065bd;
background-color: #0065bd;
color: #fff;
font-size: 16px;
height: auto;
text-transform: uppercase;
padding: 14px 22px;
line-height: 28px;
font-weight: bold;
cursor: pointer;
display: table;
vertical-align: middle;
text-align: center;
text-decoration: none;
border-radius: 0;
width: 100%;
}
@media (min-width: 380px) {
.application-layout__container {
padding-right: 0;
}
.wrapper {
max-width: 750px;
}
.medium--one-half {
width: 50%;
}
button {
font-size: 19px;
}
}
@media (min-width: 992px) {
.wrapper {
max-width: 970px;
}
.large--one-third {
width: 33.33333%;
}
}
@media (min-width: 1200px) {
.wrapper {
max-width: 1170px;
}
}
<div class="wrapper application-layout__button__wrapper">
<div class="grid">
<div class="grid__item one-half">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third ">
<button>Back
</button>
</div>
</div>
</div>
<div class="grid__item one-half application-layout__container__right">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third">
<button class="remote-submit-button__default button__default button__primary" type="button">Confirm and pay</button>
</div>
</div>
</div>
</div>
</div>
最佳答案
您需要的是有值(value)的,但尚未得到所有浏览器的支持。这是fit-content
你可以使用 width/min-width:
.wrapper {
margin: 0 auto;
padding: 0 15px;
}
.grid {
list-style: none;
margin: 0;
padding: 0;
margin-left: -30px;
}
.grid__item {
display: inline-block;
padding-left: 30px;
vertical-align: top;
width: 100%;
box-sizing: border-box;
}
.application-layout__container__right {
float: right;
}
.one-half {
width: 50%;
}
button {
width: 100%;
white-space: nowrap;
border: 1px solid #0065bd;
background-color: #0065bd;
color: #fff;
font-size: 16px;
height: auto;
text-transform: uppercase;
padding: 14px 22px;
line-height: 28px;
font-weight: bold;
cursor: pointer;
display: table;
vertical-align: middle;
text-align: center;
text-decoration: none;
border-radius: 0;
min-width: fit-content;
}
@media (min-width: 380px) {
.application-layout__container {
padding-right: 0;
}
.wrapper {
max-width: 750px;
}
.medium--one-half {
width: 50%;
}
button {
font-size: 19px;
}
}
@media (min-width: 992px) {
.wrapper {
max-width: 970px;
}
.large--one-third {
width: 33.33333%;
}
}
@media (min-width: 1200px) {
.wrapper {
max-width: 1170px;
}
}
<div class="wrapper application-layout__button__wrapper">
<div class="grid">
<div class="grid__item one-half">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third ">
<button>Back
</button>
</div>
</div>
</div>
<div class="grid__item one-half application-layout__container__right">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third">
<button class="remote-submit-button__default button__default button__primary" type="button">Confirm and pay</button>
</div>
</div>
</div>
</div>
</div>
关于html - 允许按钮在响应式网格中完全展开而不截断文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48290588/