css - 将 2 个单词堆叠在一起

Question

我在一个圆形提交按钮中有 2 个单词，我想将它们堆叠在一起而不是并排放置。我试过“word-wrap:break-word;”，但这种编码是视宽度和高度而定的。

我不想为提交按钮创建图像，因为我确信有一种方法可以使用 CSS 实现这一点。感谢您的帮助!

这是一个 Mail Chimp 注册表单

HTML

<div class="clear"><input type="submit" value="Get It!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

CSS

.button {
    font-family: 'Lobster', Helvetica Neue, Helvetica, Arial, sans-serif;
    text-shadow: 1px 1px #000;
    font-size: 1.8em;
    letter-spacing: .03em;
    color: #fff;
    background-color: #f8a8a1;
    border: 2px solid #f8a8a1;
    padding: 0em 0.3em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 50px;
    display: inline-block;
    margin: 0;
    height:74px;
    width:74px;
    word-wrap:break-word;
    position: absolute;
    margin: -1em 0em;
    line-height:1em;
}

Answer 1

将 word-spacing 设置为等于容器的宽度即可。

button {
    font-size: 1em;
    width: 200px;
    word-spacing: 200px;        
}

http://jsfiddle.net/x2y4m78k/