Question

我正在尝试截断div元素中某些文本的高度，但是问题是max-height不能正常工作，而max-width可以正常工作。

我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <div class="text">
            Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured. 
    </div>
</body>
</html>

我的CSS代码：

.text{
    color: red;
    max-height: 10%;
    max-width: 80%;
}

这会减小文本的宽度，但不会减小高度。

Answer 1

%从父级的高度/宽度开始计算。 .text的父对象是身体，并且身体没有应用高度。因此实际上max-height: 10%;不会被正确计数。尝试添加一些包装，并在其中px中添加一些高度，以查看区别。例如：

.wrapper {
  height: 400px;
  outline: 1px solid red;
}

.text{
    outline: 1px solid green;
    color: red;
    max-height: 10%;
    max-width: 80%;
}

<div class=wrapper>
      <div class="text">
            Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured. 
    </div>
</div>

Answer 2

您需要将height: 100%设置为html和body元素，以便10％指向视口高度。您还需要在文本包装器上设置overflow: hidden才能截断它，否则它将超出其边界。

body, html {
  height: 100%;
}

.text {
  color: red;
  max-height: 10%;
  max-width: 80%;
  overflow: hidden;
}

<div class="text">
  Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new
  winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured.
</div>

Answer 3

您可以使用line-height属性代替最大高度。

.text{
    color: red;
    line-height: 40%;
    max-width: 80%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <div class="text">
            Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured. 
    </div>
</body>
</html>

最大高度不会降低文本的高度

3 个答案: