Question

我是CSS和HTML的初学者，无法解决这个问题。我尝试过使用max-height，line height和line-clamp没有任何作用。

HTML code：

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet home.css">
    <meta charset="utf-8">
    <title>Untitled Document</title>
</head>
<body>
    <div id="div1" style="height: 500px">
        <p>Welcome to the FIFA tournament creator</p>
        <a href="#" class="blue btn">Get Started</a>
    </div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

div
{
}
#div1
{
    background-image: url(../Images/div1.png);
    min-height: 440px;
    font-size: 35px;
    font-family: molengo, sans-serif;
    font-weight: 600;
    font-variant: normal;
    font-style: normal;
    color: #FFFFFF;
}
.btn {
    background: #CCC;
    color: #FFF;
    display: inline-block;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    font-family: Arial, sans-serif;
    padding: 0 3em;
    text-decoration: none;
    background: linear-gradient(#11A1D6,#0E86B2);
    text-shadow: 1px 1px 1px #0E86B2;
    height: 50px;
    width: 50px;
    -webkit-line-clamp: 1;
    line-height: 1;
    text-align: left;   
}
.blue.btn {
    background: linear-gradient(#11A1D6,#0E86B2);
    text-shadow: 1px 1px 1px #0E86B2; 
}
.btn:hover { 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 
    inset 0 1.5em 1em rgba(255,255,255,0.3);
}
.btn:active { 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 
    inset 0 1.5em 1em rgba(0,0,0,0.3); 
}

Answer 1

你的问题是你从填充中获得了大部分宽度。填充正是它听起来的样子 - 用于构造元素的内部空白空间。

这不应与 margin 混淆，后者是元素周围的空白区域。

要解决您的问题，您需要获得由width元素定义的可用宽度。目前设置为50px，这对于您的文本来说还不够大。事实上，你甚至看到整个单词“开始”的唯一原因是因为你没有设置溢出属性。

只需从按钮中移除width:50px或将其设置为auto即可。我还更改了按钮的填充以保持原始大小。您还可以删除高度值并将其替换为垂直填充以使文本居中：

填充：10px 1em;
  ~~身高：50px;~~
  ~~宽度：50px~~ ;

JSFiddle

Answer 2

删除width: 50px以使其有效。你的按钮的宽度是短的。

演示http://jsfiddle.net/MgvPB/

按钮中的文字不会停留在一行上

2 个答案:

JSFiddle