删除包裹的单词

Question

我有两个按钮，最初是“加入”和“创建”。使用@media all and (min-width: 1000px)，它分别变为“加入房间”和“创建房间”。 Here's what I have

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

• 我不想使用white-space:nowrap; overflow:hidden;，因为您仍然可以看到“房间”一词的开头。
• 我想不惜一切代价将所有东西都放在一条线上。我也不想只增加1000px，所以800×600的人看起来不错，但1920×1080的人则看空。
• 我也要求一个纯CSS方法。
• 如果你知道我的意思，我会有一点强迫症，而且我想确保我解释所有分辨率的所有人以及字体数量增加/减少的人。

提前致谢。

Answer 1

删除您的媒体查询并向.roombuttons添加一些ccs，如下所示：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;

}

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