Question

我有以下设置：https://jsbin.com/xovupozopo/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:700" rel="stylesheet">
</head>
<body>
  <div class="box">
    <span class="text">V</span>
</body>
</html>

减：

@fontsize: 128pt;
@size: 95pt;

.box {
  display: inline-block;
  padding: 10pt 10pt 0 10pt;
  background-color: #ffffff;
  margin: 10pt 10pt 10pt 10pt;
  border-radius: 4pt;
  box-shadow: 0 3pt 5pt rgba(0, 0, 0, 0.25);
}

.text {
  font-size: @fontsize;
  text-align: center middle;
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: 0 10px 0 rgba(255, 255, 255, 0.25);

}

body {
  background-color: #00ff00;
}

结果如下：

显然它太高了。我似乎无法通过在跨度或div上摆弄边距或填充来减小尺寸。

如何按比例减小垂直高度，以便将其调整为固定宽度的缩放平方？

Answer 1

将.text显示为block，设置其height和overflow：

.box {
  display: inline-block;
  padding: 10pt;
  background-color: #ffffff;
  margin: 10pt 10pt 10pt 10pt;
  border-radius: 4pt;
  box-shadow: 0 3pt 5pt rgba(0, 0, 0, 0.25);
}

.text {
  display: block;
  font-size: 95pt;
  text-align: center;
  height: .8em;
  overflow: hidden;
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: 0 10px 0 rgba(255, 255, 255, 0.25);
}

body {
  background-color: #693;
}

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:700" rel="stylesheet">

<div class="box">
  <span class="text">V</span>
</div>

CSS中的文本装订线

1 个答案: