Decrease the span's height that is derived from its parent

I have a div with paragraph and inside that span is there height of div is given. Both the paragraph and span were inherited, but now I want to decrease the height of the span using CSS. The reduction in height may be around 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 
</span>
</p>
<div>

htmlcss

Answer №1

Experiment with this CSS snippet:

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

Answer №2

Give this a shot:

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>
            My text will go here, repeating several times to demonstrate
        </span>
    </p>
<div>

Reminder: The blue border around the parent is 20px wider.

Answer №3

Typically, inline elements such as span do not have width and height attributes by default. To remedy this, you can set the display property to inline-block. For more detailed information on setting the width of inline elements, check out this resource.

Below is some code that demonstrates how to manage the height of a span element:

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

For further insights on managing the height of inline-block elements, refer to this link, which explains how the vertical-align property can assist in positioning content within a p tag when applied to a span element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

How can I increase the element by $100 using a dropdown selection in JavaScript?

Hey there! Looking to create a dropdown list with two shipping options: Special Shipping Normal Shipping <select> <option>Special Shipping</option> <option>Normal Shipping</option> </select> If the user selects Speci ...

javascriptjqueryhtml

Creating a custom front page in WordPress with a custom post type post

After using the CPT UI plugin in WordPress to create a custom post type, I am now facing the issue of not being able to display these posts on the front page by setting the 'reading' option in the admin panel. How can I go about displaying them p ...

phphtmlwordpress

Issues arise with the Node EJS module due to the malfunction of the include

Struggling with incorporating HTML snippets into my index.html, even after reviewing the EJS documentation. Directory Structure: project -public --assets ---css ---images ---js --Index ---index.html + index.css and index.js --someOtherPageFolder -views - ...

javascripthtmlnode.jsexpressejs

Ways to modify the text color of an inactive TextField in Material UI React JS

After researching how to change the disabled TextField font color on Stack Overflow, I implemented the solution using Material-UI. However, when I tried to create a new customized TextField based on the example provided, it did not work as expected and dis ...

cssreactjsmaterial-uitextfieldreact-with-styles

When running a local server with Node.js, the file index.js cannot be found if it is located one folder above the

I am relatively new to node.js and have encountered an issue while running a local server with index.js located one directory up from index.html. The browser is giving me an error message in this scenario. However, when I run the server with index.js in t ...

javascripthtmlnode.jstypescriptexpress

CSS design element for creating unique corner shapes

Is there a way to create this shape using only CSS? I'm having trouble getting the middle white square perfectly centered. How can I achieve this? https://i.sstatic.net/Z9Cfb.png This is my current code: <div style="position:absolute; top:20px ...

htmlcss

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

Changing colors when hovering over different elements

I am struggling to create a hover color change effect that applies to all elements (icon, text, and button) from top to bottom. Currently, the hover effect only changes the color of either the text and icon or the button individually. Below is the code sn ...

htmlcsshover

What is the best way to arrange list items in this manner?

I am facing challenges with aligning elements properly on the navigation bar. I would like the words (home, players, about, contact) to be vertically centered in relation to the heart logo. Here is how it currently appears: This is how I want it to look ...

htmlcss

The bootstrap carousel images are arranged in a vertical stack, regardless of the size of the screen

I'm having some trouble with my bootstrap carousel. The images are stacking on top of each other when the page loads, even though everything else seems to be working fine - controls, indicators, etc. Any ideas on what's causing this issue? <! ...

htmlcsstwitter-bootstrapbootstrap-4

Side-menu elevates slider

Struggling to keep my slider fixed when the side-menu slides in from the left? I've scoured for solutions without luck. Any expert out there willing to lend a hand? Code Snippet: https://jsfiddle.net/nekgunru/2/ ...

javascriptcsssliderposition

Tips for integrating WMV files into an HTML5 document

I've been attempting to integrate some s3 WMV file URLs into my HTML page, but the following code doesn't seem to be functioning as expected. <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Microsoft® Windows® ...

htmlangularjs

Refresh all the data points displayed on the c3.js chart

I created a basic div element in my HTML code: <div class='all'> Show all </div> Accompanying that, here is the JavaScript code I implemented: $(document).ready(function () { $('.all').click(function(){ ch ...

javascriptjqueryhtmlc3.js

The z-index of the fixed header in FullPageJS is causing the section's content to be hidden

For my current project, I am incorporating FullPageJS and using a fixed top menu that adjusts its height based on the viewport size. On smaller screens, the menu items will be stacked on top of each other, while on wider screens, the menu items will be po ...

jqueryhtmlcssfullpage.js

The unexpected syntax error, indicated by an ampersand followed by a quotation mark, was encountered in [location] on line 7

Every time I try to run my code, I encounter the following error message: Parse error: syntax error, unexpected '"' in D:\server\WT-NMP\WWW\myproj1\insert.php on line 7 This is the code that is triggering the error: &l ...

phphtmlmysql

Steps for updating the value of angular inputs within a function

When a card is selected on the page below, the input values should be updated with information from a JSON object. Here is the JSON data: { "status": true, "data": [ { "id": 1, "pessoa_id": 75505 ...

javascripthtmlangular

Unable to trigger click event following regeneration of elements

I am having trouble with a click event on checkboxes when I remove and insert new table bodies. How can I fix this issue? I have tried using append(), clone() but it didn't work for my code. To demonstrate the problem, I have created a JSFIDDLE which ...

javascriptjqueryhtml

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

htmlcssweb-component

Having trouble getting a response from PHP file with Ajax request

After submitting a registration form, I am trying to send an email using PHPMailer. I am successfully receiving the email, but not getting redirected or seeing any message notice box after the email has been sent. The Signup Form <form id="f ...

javascriptphpjqueryhtmlajax