如何实现单容器内长文本分不等宽且可调整的两列布局？

嘿，我完全get你的需求——单个容器里的长文本自动拆成宽度可自定义的不等宽两列，不想手动把文本拆进两个div，还得保证文本不会被溢出隐藏对吧？用CSS原生的column-count确实只能搞等宽列，那咱们来试试两个靠谱的方案，完美匹配你的需求：

方案一：纯CSS实现（无需JS，简单省心） #

这个方法利用浮动伪元素让文本自动环绕，形成天然的不等宽两列，完全不用拆分原文本，也不会有溢出隐藏的问题：

#main-article {
  width: 100%;
  overflow: hidden; /* 避免浮动元素溢出容器 */
  min-height: 200px; /* 可选，给容器一个最小高度，避免短文本时布局奇怪 */
}

#main-article::before {
  content: "";
  float: left;
  width: 35%; /* 这里设置第一列的宽度，剩下的空间就是第二列的宽度 */
  margin-right: 8vw; /* 控制两列之间的间距 */
  shape-outside: inset(0 0 0 0); /* 定义矩形环绕区域，确保文本准确贴合列宽 */
  height: 10000px; /* 用超大高度保证文本不会绕到浮动元素下方 */
}

怎么调整？ #

• 修改width的值就能控制第一列的宽度（比如设为40%，第二列就自动占60%）
• 调整margin-right可以改变列之间的空隙
• 完全不用动你的原<article>里的文本，直接套用就行，文本会自动流成两列，而且全程不会被截断或隐藏

方案二：JS/JQuery动态拆分（适合精确控制场景） #

如果需要更灵活的逻辑（比如根据屏幕尺寸动态调整列宽、避免截断特定单词），可以用JS自动拆分文本到两个flex布局的列里，保证文本完整显示：

<article id="main-article">
  <!-- 你的长文本内容放在这里 -->
</article>

<script>
$(document).ready(function() {
  const article = $('#main-article');
  const col1Width = '30%'; // 第一列宽度，可自定义
  const columnGap = '6vw'; // 列间距
  
  // 创建两个列容器
  const col1 = $('<div class="text-column col-1"></div>');
  const col2 = $('<div class="text-column col-2"></div>');
  
  // 给主容器设置flex布局
  article.css({
    display: 'flex',
    gap: columnGap,
    width: '100%',
    flexWrap: 'nowrap'
  });
  
  // 设置列的宽度
  col1.css('width', col1Width);
  col2.css('flex', 1); // 第二列自动占剩余宽度
  article.empty().append(col1, col2);
  
  // 拆分文本，避免截断单词
  const fullText = article.text().trim();
  const words = fullText.split(' ');
  let currentContent = '';
  
  // 逐个添加单词到第一列，直到第一列的高度接近容器高度
  for (let i = 0; i < words.length; i++) {
    currentContent += words[i] + ' ';
    col1.text(currentContent);
    
    // 当第一列内容高度接近容器高度时，停止添加，把剩下的内容放到第二列
    if (col1[0].scrollHeight >= article[0].clientHeight * 0.9) {
      col2.text(words.slice(i).join(' '));
      break;
    }
  }
  
  // 如果文本太短，直接把所有内容放到第二列（可选逻辑）
  if (col2.text() === '') {
    col2.text(currentContent);
    col1.text('');
  }
});
</script>

<style>
.text-column {
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.6; /* 可选，调整行高优化阅读体验 */
}
</style>

这个方案的优势： #

• 可以精确控制每一列的宽度，甚至根据窗口大小动态调整（比如加个resize事件监听）
• 拆分时会避免截断单词，保证文本的可读性
• 所有文本都会完整显示，完全不会出现溢出隐藏的情况

为啥原来的column-count不行？ #

原生的CSS多列布局（column-count）是把容器平均分成指定数量的等宽列，没法单独设置某一列的宽度，所以才满足不了你不等宽的需求~

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