求助：单个div内多行文本样式异常、垂直居中及溢出问题

Let's break down and fix each of your problems one by one:

1. Fixing Bold Override & Vertical Centering #

The main issue with vertical centering is using line-height: 90px—this works great for single-line text but breaks when you have multiple lines, causing overflow and misalignment. Instead, use Flexbox for reliable vertical centering that works with any number of lines.

Also, while your noneBold class is correct, the fixed height on the div was causing the second line to overflow, making it look like the bold wasn't applied (it actually was, but the text was outside the div's bounds).

2. Ensuring Sub Div 3 Stays Inside the Div #

Your .divProp had a fixed height:90px, which wasn't enough to fit two lines of text. Changing this to min-height:90px lets the div expand to fit its content, while keeping a minimum height for consistency with other divs.

3. Adding Different Font Sizes #

Create a custom class (like .smallerText) to apply different font sizes to specific lines, then add it to the relevant <p> element.

Corrected CSS #

.divProp {
  text-align: center;
  /* Use flexbox for vertical centering */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-color: #CCCCCC;
  border-width: thin;
  border-style: solid; /* Added this—border won't show without a style! */
  min-height: 90px; /* Changed from fixed height to min-height */
  background-color: lightblue;
  padding: 15px;
  min-width: 100px;
  word-wrap: break-word;
}

.divProp>p {
  color: black;
  font-weight: bold;
  font-size: 13px;
  margin: 4px 0; /* Add small margin between lines for spacing */
}

.noneBold {
  font-weight: normal;
}

.smallerText {
  font-size: 11px; /* Example smaller font size */
}

Corrected HTML #

<table>
  <tr>
    <td>
      <div class="divProp">
        <p>DIV 1</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 2</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>LONG TEXT DIV 3</p>
        <p class="noneBold smallerText">Sub Div 3</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 4</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 5</p>
      </div>
    </td>
  </tr>
</table>

Key Changes Explained: #

• Flexbox Centering: display: flex, flex-direction: column, justify-content: center ensures all content inside the div is vertically centered, no matter how many lines there are.
• Min-Height: min-height:90px keeps the div at least 90px tall but allows it to grow if needed for multiple lines.
• Border Style: Added border-style: solid because border-width and color won't render without a style specified.
• Line Spacing: Added margin:4px 0 to the <p> elements to create space between lines in multi-line divs.
• Font Size Class: The .smallerText class lets you easily adjust the font size for specific lines.

This should resolve all your issues: the second line will be non-bold, stay inside the div, be vertically centered, and you can adjust font sizes per line as needed.

内容的提问来源于stack exchange，提问作者Maro