content inside the span are hiding the parent when span is growing-CodePudding

I have a html and css designed in this way.

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}


/*class from global css file */

.contentAlignment {
  margin-left: 10px;
  line-height: 23px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
}


/*this class are modification in the component itself */

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div >
  <!---->
  <div>
    <!---->
    <div >
      <label >References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div >
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

The <span> element inside the div having the class contentAlignment are dynamic content for which I don't have the control, and it should be displayed exactly how the user has setup.

If those content have large font size it will overflow the parent div. The parent div are hidden.

How to fix this particular issue?

Edit:

I had also tried by changing the

.contentAlignment {
  line-height: 0
  margin-left: 0;
}

But it is not working, because removing the line-height completely from this class only then it works.

.contentAlignment {
  margin-left: 10px;
  line-height: 23px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
}

Problem here is i couldn't remove the line-height from global.css and it is the global file which is used in all the pages, removing the line height may create the problem in other components.

CodePudding user response：

Looks like it's because line-height is set as px instead of relative to the font size. (The font size should also be in rem or em and not px, but that's unrelated to this issue).

I also removed the CSS that was overwritten anyway.

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  line-height: 1.35;
  max-width: 100%;
  cursor: text;
  font-size: 14px;
  margin-left: 0;
}

<div >
  <!---->
  <div>
    <!---->
    <div >
      <label >References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div >
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

The problem here is that you are using a fixed line height in your style sheet. The result is that you are increasing the font size while keeping the line_height: 23px

In this case you should just remove the line-height

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  margin-left: 10px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
}

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div >
  <!---->
  <div>
    <!---->
    <div >
      <label >References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div >
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

The issue is due to line-height: 23px, which doesn't match the set font-size (in this case, 43px).

Just apply line-height: normal to the .contentAlignment-class. As long as the line-height specified by whatever other source isn't more specific, it should work. Also, line-height: normal has to be read after line-height: 23px, as CSS is read from top to bottom. If your selector is more specific though, this shouldn't be an issue.

You can see my example I've applied line-height: normal after line-height: 23px, which overrides the former line-height. Just remember this logic applies to stylesheets as well, so make sure the stylesheet thats applying line-height: normal is read after the one thats applying line-height: 23px (unless your selector is more specific).

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}


/*class from global css file */

.contentAlignment {
  /* doesn't work - it's overwritten */
  line-height: normal;
}

div.contentAlignment {
  /* works - is more specific than just .contentAlignment */
  line-height: normal;
}


.contentAlignment {
  margin-left: 10px;
  line-height: 23px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
  /* works - overrides the line-height */
  line-height: normal;
}

.contentAlignment {
  /* works - overrides the line-height */
  line-height: normal;
}

/*this class are modification in the component itself */

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div >
  <!---->
  <div>
    <!---->
    <div >
      <label >References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div >
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>