如何解决完全隐藏按钮上的环绕文字
我正在尝试建立一个带有按钮的栏，其按钮文本响应可用宽度。当宽度变小时，（长）文本开始换行时，应显示其他替代（短）文本。我已经尝试过使用CSS网格，FlexBox和translateY（100％-1em），这似乎很有希望，但由于FlexBox内的绝对定位的结合，我无法使其正常工作。
我想用纯CSS实现此功能，而无需使用JavaScript和媒体查询。如何实现呢？
这是CSS（基本设置，但是不起作用）
.button-bar {
width: 100%;
height: 10rem;
display: flex;
flex-direction: row;
Box-sizing: border-Box;
}
.button-bar button {
background: green;
padding: 1em;
margin: 1.5rem;
height: 3em;
}
.button-bar button .button-text-wrapper {
display: flex;
background: yellow;
height: 1em;
overflow-y: hidden;
}
.button-bar button .button-text-wrapper .button-text {
display: flex;
flex-direction: column;
height: 1em;
}
.button-bar button .button-text-wrapper .button-text .long {
background: orange;
}
.button-bar button .button-text-wrapper .button-text .short {
background: tomato;
}
<div class="button-bar">
<button class="button">
<div class="button-text-wrapper">
<div class="button-text">
<div class="button-text long">Create Account</div>
<div class="button-text short">Submit</div>
</div>
</div>
</button>
<button class="button">
<div class="button-text-wrapper">
<div class="button-text">
<div class="button-text long">Save details</div>
<div class="button-text short">Update</div>
</div>
</div>
</button>
<button class="button">
<div class="button-text-wrapper">
<div class="button-text">
<div class="button-text long">Dump my screen Now</div>
<div class="button-text short">Print</div>
</div>
</div>
</button>
</div>解决方法
.button-bar {
width: 100%;
height: 10rem;
display: flex;
flex-direction: row;
box-sizing: border-box;
}
.button-bar button {
background: green;
padding: 1em;
margin: 1.5rem;
height: 3em;
}
.button-bar button .button-text-wrapper {
display: flex;
background: yellow;
height: 1em;
overflow-y: hidden;
}
.button-bar button .button-text-wrapper .button-text {
display: flex;
flex-direction: column;
height: 1em;
}
.button-bar button .button-text-wrapper .button-text #create:before {
background: orange;
content: 'Create Account';
}
.button-bar button .button-text-wrapper .button-text #save:before {
background: orange;
content: 'Save details';
}
.button-bar button .button-text-wrapper .button-text #print:before {
background: orange;
content: 'Dump my screen now';
}
@media (max-width: 600px) {
.button-bar button .button-text-wrapper .button-text #create:before {
background: tomato;
content: 'Submit';
}
.button-bar button .button-text-wrapper .button-text #save:before {
background: tomato;
content: 'Update';
}
.button-bar button .button-text-wrapper .button-text #print:before {
background: tomato;
content: 'Print';
}
}<div class="button-bar">
<button class="button">
<div class="button-text-wrapper">
<div class="button-text">
<div class="button-text" id='create'></div>
</div>
</div>
</button>
<button class="button">
<div class="button-text-wrapper">
<div class="button-text">
<div class="button-text" id='save'></div>
</div>
</div>
</button>
<button class="button">
<div class="button-text-wrapper">
<div class="button-text">
<div class="button-text" id='print'></div>
</div>
</div>
</button>
</div>
我仍然不明白为什么您只需要通过CSS
,根据您的建议，我自己找到了解决方案。基本上，它在包含div的称为“按钮文本”的div中使用绝对位置元素表示短文本，并在其下方使用相对位置表示长文本。默认情况下，短文本div的高度计算为零，因此不可见。
在减小宽度时，长文本将自动换行，长文本高度为5.2em。结果，包含的div'button-text'的高度增加，而long-text会自动翻译。标准，翻译为零。一旦大于预期的非包装文本（在这种情况下为2.6em），它就会翻译成看不见的内容（100％-2.6em）；
同时，短文本的高度计算为2.6em，并在顶部的绝对位置上可见：0;
附加的代码段是基本布局。当短文本也将自动换行时，它可以扩展到wrap-to-icon button，并且可以在button bar with intelligent syncing of button-text to icons中实现，因为这是项目的初衷。
希望这会有所帮助！再次非常感谢您的启发：-）。
.button-container {
width: 80vw;
left: 10vw;
margin-top: 10vh;
background: white;
}
.button-container button.button {
font-size: 2em;
width: 100%;
height: 3em;
line-height: 2.6em;
padding: 0.2em;
min-width: 3em;
color: #333;
background-image: radial-gradient(red,yellow,green);
border: 1px solid black;
overflow: hidden;
cursor: default;
}
.button-container button.button .button-text {
width: 200%;
}
.button-container button.button .button-text .long {
width: 50%;
position: relative;
float: left;
overflow-wrap: break-word;
text-align: center;
}
.button-container button.button .button-text .long-text {
-webkit-transform: translateY(calc(100% - 2.6em));
transform: translateY(calc(100% - 2.6em));
max-height: 5.2em;
}
.button-container button.button .button-text .short {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 2.6em);
overflow: hidden;
}
.button-container button.button .button-text .short-text {
white-space: nowrap;
}<div class="button-container">
<button class="button">
<div class="button-text">
<div class="long">
<div class="short">
<div class="short-text">hi world</div>
</div>
<div class="long-text">hello universe!</div>
</div>
</div>
</button>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。