将文本强制到 li 内的两行答案

【问题标题】：force text onto two lines within li将文本强制到 li 内的两行
【发布时间】：2014-09-14 08:26:53
【问题描述】：

我有一个我想要设置样式的 html 文件，它包含一对无序列表的链接（和一个跨度），我希望第二个链接有我已经实现的圆形背景，但是我需要使链接的文本跨越多行（可能每行一个单词）

标记是：

<div class="controls">
    <ul class="betrow">
        <li><a href="#" class="btn secondary">pop up 1</a></li>
        <li><a href="#" class="btn decrease">add more</a></li>
        <li><span>1</span></li>
        <li><a href="#" class="btn increase">take away</a></li>
        <li><a href="#" class="btn secondary">pop up 2</a></li>
    </ul>

    <!-- PLAY ROW -->
    <ul class="playrow">
        <li><a href="#" class="btn">Quick Play</a></li>
        <li><a href="#" class="btn">Play 5</a></li>
        <li><a href="#" class="btn primary">Play</a></li>
        <li><a href="#" class="btn">Play 10</a></li>
        <li><a href="#" class="btn oneline">Clear</a></li>
    </ul>
</div>

我应用的样式是：

    html {
        font-size: 62.5%;
    }
    body {
        font-family: 'Allan', Arial, sans-serif;
        font-size: 1rem;
        letter-spacing: 0.1rem;
        min-width: 320px;
    }
    a {
      text-decoration: none;
      border: none;
      outline: none;
    }
    .controls {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #FFF;
    z-index: 1; 
    border: 10px solid #630;
    }
    .controls ul {
    display: block;
    height: 30px;
    width: 70%;
    list-style: none;
    padding: 0;
    overflow: visible;
    letter-spacing: 0px;
    }
    .controls ul li {
    float: left;
    }
    .controls ul.betrow {
    margin: 2px auto 10px;

}

.controls ul.playrow {
    margin: 0 auto 10px;
}

.controls ul.playrow li,
.controls ul.betrow li {
    display: block;
    width: 18.4%;
    margin-right: 2%;
    height: 30px;
}



.controls ul.betrow li a,
.controls ul.betrow li span{
    border-radius: 15px;
}

.controls ul.playrow li a,
.controls ul.playrow li span{
    border-radius: 25px;
    max-width: 30px;
    min-width:30px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    word-spacing:0px;
    font-size:0.8rem;
    word-break:break-all;
    word-wrap:break-word;   
}

.controls ul.betrow li:last-child,
.controls ul.playrow li:last-child {
    margin-right: 0;
}

.controls ul li a,
.controls ul li span {
    display: block;
    text-align: center;
    line-height: 30px;
    white-space: nowrap;    
}

.controls ul li span {
    overflow: visible;
    font-size: 3rem;
    color: #111;
    letter-spacing: -1px;
    animation: scalePulse 5s ease-in-out infinite;
    text-shadow: -1px -1px 0 #FFF;
}

.controls ul li a {
    text-transform: uppercase;
    background-color: #1c1e00; 
    box-shadow: inset 0 0 5px #030;
    text-shadow: 1px 1px 0px #000;
    font-size: 1.4rem;
    color: #FFF;
    border: 4px solid #630; 
}

.controls ul li a:hover,
.controls ul li a:active,
.controls ul li a:focus {
    background-color: #1c0e00;
    border: 5px solid #630; 
    transition: background-color 0.5s ease-out;
}

.controls ul li a.primary {
    font-size: 1.8rem;  
    background-size:90%;
    color: #fff;
    border: none;
    border-radius: 0;
    margin-left: -10px;
    margin-top: -8px;
    padding-top:10px;   
    height: 40px; 
    box-shadow: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;   
    max-width:none;
}

.controls ul li a.primary:hover,
.controls ul li a.primary:active,
.controls ul li a.primary:focus {
    background-image: url('../images/game2/bg_plank.svg');  
}

.controls ul li a.secondary {
    background-color: #1c0e00;
    box-shadow: inset 0 0 5px #00275B;
    display: none;
}

.controls ul li a.secondary:hover,
.controls ul li a.secondary:active,
.controls ul li a.secondary:focus {
    background-color: #1c0e00;
    transition: background-color 0.5s ease-out 0s;
}

.controls ul li a.increase,
.controls ul li a.decrease {
    background-color: #1c0e00; 
    box-shadow: inset 0 0 5px #300;
}

.controls ul li a.increase:hover,
.controls ul li a.decrease:hover,
.controls ul li a.increase:active,
.controls ul li a.decrease:active,
.controls ul li a.increase:focus,
.controls ul li a.decrease:focus {
    background-color: #1C0E00;
    transition: background-color 0.5s ease-out;
}

我尝试添加 word-break:break-all;和 word-wrap:break-word;但两者都没有帮助。

为了澄清，我只希望文本“快速播放”、“播放 5”、“播放 10”分成 2 行，以便它们很好地适合锚点的圆形背景。

【问题讨论】：

你能把它放在jsfiddle.net 中，我们可以看到问题吗？
你在单词之间尝试过
吗？ ?如果您只想添加换行符，我认为
会完成您的工作

标签： html css

【解决方案1】：

你有 white-space:nowrap 告诉浏览器不要做这种包装，否则浏览器会自动做。

另一个问题是您使用 line-height 将按钮文本垂直居中，不幸的是，这会导致您的文本向下包裹得太远，让您的按钮看起来更糟！

【讨论】：

你对行高非常正确，我已经删除了空白样式，并且还设置了 line-height:1;现在我需要以某种方式将文本居中。
将文本垂直居中
发现这篇文章对解决垂直对齐问题很有用stackoverflow.com/questions/13963564/…
@MikeW 确实，您使用链接作为开始，我认为按钮会自动执行此操作：jsfiddle.net/NN2TK

【解决方案2】：

那么使用br标签怎么样？

<li><a href="#" class="btn">Quick <br />Play</a></li>

【讨论】：

那么您还必须调整行高。它的 arround 2em 和你的圈子显示为圆形。

【解决方案3】：

您可以将其添加到您的 css 中：

.playrow li{width: 25px;}

Fiddle demo

【讨论】：

【解决方案4】：

Fiddle:

除了使用<br /> 和fixed width，您还可以使用另一种技巧。

这是word-spacing。

.playrow li a { word-spacing:999em; }

另外，使用word-spacing不会有任何副作用

【讨论】：