我有一个简单的按钮标签,我特别希望文本溢出按钮.这在当前浏览器中工作正常,但Safari(ios和osx)除外,它在按钮边界处剪切文本.
button,
.button {
width: 100px;
overflow: visible;
white-space: nowrap;
text-overflow: 'clip';
text-align: left;
-webkit-appearance: none;
background: none;
border: none
}<button>Very long text Very long text Very long text This Clips In Safari</button>
<div class='button'>Very long text Very long text Very long text This Overflows</div>我无法弄清楚如何让文本溢出.有谁知道如何使这项工作.TIA
我对CSS网格布局有疑问。
网格容器的位置绝对正确，并且grid-template-rows包含1fr，以允许一行占用所有可用空间。
这会在所有当前的浏览器上正确显示，但与macOS 10.13.2一起安装的最新Safari除外
如果未明确设置高度，则似乎是由于未计算自由空间而引起的。
我是否缺少某些东西或有解决方法？
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-rows: 1fr 150px;
grid-template-columns: 1fr 150px;
grid-template-areas: "a b" "c d";
}
.wrapper>div {
outline: solid 1px #aaa;
padding: 10px;
}
.game {
grid-area: a;
}
.player {
grid-area: b;
}
.rules {
grid-area: d;
}
.controls {
grid-area: c;
}<div class="wrapper">
<div class="game">game</div>
<div class="player">player</div>
<div class="rules">rules</div> …