基于Flexbox实现子DIV自适应父级宽度，实现footer文本截断或换行

Let's get that footer text behaving correctly—either truncating with an ellipsis when it's too long, or wrapping naturally—while sticking to your requirements: pure HTML/CSS Flexbox, no explicit div widths, and content-adaptive sizing.

Option 1: Truncate with Ellipsis (When Text Exceeds Container Width) #

To make the footer text cut off with an ellipsis when it doesn't fit, we just need to ensure the footer content inherits the container's width and apply your existing .truncate class properly. Here's the adjusted code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; /* Ensure the text container takes full width of its parent */
}
</style>
</head>
<body>
<div class="row" style="display:flex; justify-content: flex-start; padding: 5px; border: 2px solid red;">
<div class='olb-container' style='width: fit-content; display: flex; flex-direction: column; justify-content: flex-start; margin: 5px; border: 2px solid green;'>
<div class='olb-header' style='display: flex; justify-content: center; overflow-x: hidden; border: 1px solid black; padding: 0 3px 2.5px 3px; font-size: 125%; font-weight: 900;'>HEADER</div>
<div class='olb-center' style='display: flex; flex-direction: row; border: 1px solid black;'>
<div class='olb-yes-col' style='display: flex; flex-direction: column; align-items: stretch; border: 1px solid black; '>
<div class='olb-yes-title' style='border-bottom: 1px solid black; padding: 2.5px 3px 3px 3px;'>YES</div>
<div class='olb-yes-checks' style='padding: 2.5px 3px 3px 3px;'>
<div style='display: flex; flex-direction: column; align-items: center'>
<input class='olb-yes' type='checkbox' data-text='aaa' value=true>
<input class='olb-yes' type='checkbox' data-text='bbb' value=true>
</div>
</div>
</div>
<div class='olb-items-col' style='display: flex; flex-direction: column; align-items: stretch; border: 1px solid black;'>
<div class='olb-items-title' style='border-bottom: 1px solid black; padding: 2.5px 3px 3px 3px;'>LABEL</div>
<div class='olb-items-text' style='display: flex; flex-direction: column; align-items: center; padding: 2.5px 3px 3px 3px;'>
<div>aaaa</div>
<div>bbb</div>
</div>
</div>
<div class='olb-no-col' style='display: flex; flex-direction: column; align-items: stretch; border: 1px solid black;'>
<div class='olb-no-title' style='border-bottom: 1px solid black; padding: 2.5px 3px 3px 3px;'>NO</div>
<div class='olb-no-checks' style='padding: 2.5px 3px 3px 3px;'>
<div style='display: flex; flex-direction: column; align-items: center'>
<input class='olb-no' type='checkbox' data-text='aaa' value=true>
<input class='olb-no' type='checkbox' data-text='bbb' value=true>
</div>
</div>
</div>
</div>
<div class='olb-footer' style='display: flex; align-items: flex-start; border: 1px solid black; padding: 2.5px 3px 0 3px; font-size: 60%; font-style: italic;'>
<div class="truncate">FOOTERafd sdf fsddsfkjsdgfdskjgkjhgfa</div>
</div>
</div>
</div>
</body>
</html>

Key Changes for Ellipsis:

• Added width: 100% to the .truncate class so the text container takes the full width of the footer (which matches the width of the green container above it, since it's flex-column)
• Fixed the typo text-decoration: italics to font-style: italic (that property wasn't working before)
• Removed unnecessary overflow: hidden from the footer container (the .truncate class handles that)

Option 2: Auto-Wrap Text (When You Want Text to Break to New Lines) #

If you prefer the text to wrap instead of truncating, just modify the .truncate class (or create a new .wrap class) to allow line breaks:

.wrap {
  width: 100%;
  word-wrap: break-word; /* Ensures long words break if needed */
  white-space: normal; /* Allows text to wrap */
}

Then replace the footer div's class with wrap instead of truncate. This will make the text wrap within the footer's width, which is tied to the content above it.

Why This Works #

Your olb-container uses width: fit-content, so it shrinks to fit the width of the middle section (yes/label/no columns). The footer, being a flex child in the column layout, inherits that width automatically. By setting the text container inside the footer to width: 100%, we ensure it doesn't expand beyond the container, triggering either truncation or wrapping as needed.

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