Question

我有一个html dcument，我试图设计，它包含一对无序的链接列表（和一个跨度），其中第二个我想要为我已经实现的链接的圆形背景，但是我需要使链接的文本分成多行（可能每行一个单词）

标记是：

<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;和自动换行：break-word;但两者都没有帮助。

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

Answer 1

你有白色空间：nowrap在那里告诉浏览器不要做这个包装浏览器否则会自动执行。

另一个问题是你使用了行高来垂直居中你的按钮文本，遗憾的是这会导致你的文字包裹得太远并使你的按钮看起来更糟！[/ p>

Answer 2

Fiddle:

您可以使用另一个技巧，而不是使用<br />和fixed width。

哪个是word-spacing。

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

此外，使用word-spacing

不会产生任何副作用

Answer 3

那么使用br标签怎么样？

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

Answer 4

您可以将此添加到您的css：

.playrow li{width: 25px;}

Fiddle demo

将文本强制转换为li中的两行

4 个答案: