html - 删除换行的词

Question

我有两个按钮，最初是“加入”和“创建”。使用@media all and (min-width: 1000px)，它分别变为“加入房间”和“创建房间”。 这就是我所拥有的。

当我使用一个时髦的分辨率并放大时，“加入房间”（和另一个）这个词会换行，增加按钮的大小，这是我想要避免的：

• 我不想使用white-space:nowrap; overflow:hidden;，因为您仍然可以看到“房间”一词的开头。
• 我想不惜一切代价把所有东西都放在一条线上。我也不想仅仅增加 1000px，这样对于 800×600 的人来说它看起来不错，但对于 1920×1080 的人来说是空的。
• 我还要求一个纯 CSS 方法。
• 如果您知道我的意思，我有一点强迫症，我想确保我考虑到所有分辨率以及字体大小增加/减小的每个人。

提前致谢。

Answer 1

删除您的媒体查询并添加一些 ccs.roombuttons如下所示：http: //jsfiddle.net/P5DEq/5/

.roombuttons {
    -webkit-transition:width .2s;
    background:#FFF;
    border:none;
    border-radius:10px;
    cursor:pointer;
    display:block;
    font-family:inherit;
    font-weight:inherit;
    margin:auto;
    transition:width .2s;
    width:60%;

    overflow: hidden;
    padding:0 25px;
    font-size:3em;
    line-height: 2em;
    height: 2em;

}

由于文本容器的高度等于行高，并且溢出是隐藏的，因此它将显示第一行文本，而换行到下一行的文本将被隐藏。