Question

我有一个带有段落的div，并且在该跨度内部是div的高度，并且段落和跨度现在都被继承了我想要使用css减少跨度的高度。使用calc

降低高度可能是10-20px

.parent{
height:121px;
width:300px;
overflow:hidden;
}
p,span{
max-height:inherit;
}

<div class="parent">
<p>
<span>
here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come 
</span>
</p>
<div>

Answer 1

尝试使用以下css，

  p, span {
        max-height: calc(100% - 20px);
        overflow : auto;
    }

Answer 2

首先，您无法在span上指定height，因为它是内联元素。如果你想降低高度，你可以简单地做到这一点：

＆＃13;

.parent {
  height: 121px;
  width: 300px;
  overflow: hidden;
}

p {
  position: relative;
  height: calc(100% - 20px);
  overflow: auto;
}

＆＃13;

<div class="parent">
  <p>
    here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come
    here my text will come here my text will come
  </p>
</div>

＆＃13;

Answer 3

试试这个：

p {
    max-height: calc(100% - 20px);
    border: 1px solid;
    overflow: auto;
}

＆＃13;

.parent{
    height:121px;
    width:300px;
    border:2px solid blue;
}

p {
    max-height: calc(100% - 20px);
    border: 1px solid;
    overflow: auto;
}

＆＃13;

<div class="parent">
    <p>
        <span>
            here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come here my text will come 
        </span>
    </p>
<div>

＆＃13;

注意：蓝色边框是20px更大的父级。

Answer 4

默认情况下，span等内联元素不会占用宽度和高度。您需要将其display属性设置为inline-block才能实现。您可以从setting the width to inline elements了解有关内联块的更多信息。

以下是管理跨度高度的代码，可帮助您进行查询。

.outer {
  background-color: red;
  width: 100%;
  height: 121px;
  overflow: hidden;
}

p {  
  margin: 0;
  background: yellow;
  height: inherit;
}

.inner {
  width: 80px;
  height: calc(121px - 20px);
  display: inline-block;
  border: 1px solid red;
  background-color: green;
  vertical-align: top;
}

<div class="outer">
  <p> 
   this the text <span class="inner">span</span> paragraph
  </p>
</div>

进一步的信息managing the height，从这里你可以看到vertical-align如何帮助管理p标签内的内容定位，从而将vertical-align属性分配给span。

减少从父级继承的跨度的高度

4 个答案: