html - 删除换行词

Question

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

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

• 我不想使用white-space:nowrap; overflow:hidden; 因为您仍然可以看到“房间”一词的开头。
• 我想不惜一切代价将所有内容都放在一条线上。我也不想仅仅增加 1000 像素，这样它对于 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;

}

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