0

I have a div with paragraph and inside that span is there height of div is given and both paragraph and span was inherited now i want to reduce the height of span using css. reduce height may be 10- 20px using calc 

.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>
Sandeep Bhaskar
  • 300
  • 2
  • 12

3 Answers3

0

Try with the following css,

  p, span {
        max-height: calc(100% - 20px);
        overflow : auto;
    }
Nitin Dhomse
  • 2,524
  • 1
  • 12
  • 24
0

Try This:

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


.parent{
    height:121px;
    width:300px;
    border:2px solid blue;
}

p {
    max-height: calc(100% - 20px);
    border: 1px solid;
    overflow: auto;
}
<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>

Note: Blue border is parent that is 20px bigger.

Ehsan
  • 12,655
  • 3
  • 25
  • 44
0

By default, inline elements like span don't take width and height. You need to set it's display property to inline-block to achieve it. You can know more about inline-block from setting the width to inline elements.

Here is the code for managing span height that helps your query.

.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>

And further information, managing the height, from here you can see how vertical-align helps managing the positioning of content inside p tag from assigning vertical-align property to the span.

viswa sai
  • 1
  • 1