如何使用 HTML 和 CSS 创建水平排列的图文容器（避免文字溢出）-js教程-PHP中文网

如何使用 html 和 css 创建水平排列的图文容器（避免文字溢出）

本文详解如何构建一个响应式、水平布局的图书卡片容器，重点解决长文本导致的溢出问题，通过合理设置 CSS 的 white-space、word-wrap、width 及弹性布局策略，确保图片与文字信息和谐共存且不破坏整体结构。

本文详解如何构建一个响应式、水平排列的图书卡片容器，重点解决长文本导致的溢出问题，通过合理设置 CSS 的 white-space、word-wrap、width 及弹性布局策略，确保图片与文字信息和谐共存且不破坏整体结构。

在构建水平图文容器（如图书推荐卡片）时，常见痛点是摘要文字过长导致容器撑开、换行异常或强制截断失真。原始代码中 .summary 使用了 white-space: nowrap + text-overflow: ellipsis，虽能单行省略，但无法适应多行内容，且与浮动图片（float: right）共存时易引发布局塌陷与宽度冲突。

✅ 推荐解决方案：采用现代 CSS 布局 + 文本流控制

首先，移除破坏文档流的 float: right，改用更可控的 Flexbox 实现图文并排：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<div class="books-1" style="
  width: 80%; height: auto; 
  background-color: rgba(21, 18, 18, 0.8); 
  border-radius: 17px; 
  border: 2px solid purple; 
  margin: 2%;
  padding: 16px;
">
  <div class="book-info" style="
    display: flex; 
    align-items: flex-start; 
    gap: 16px;
    background-color: rgba(0, 0, 0, 0.6); 
    color: rgba(255, 255, 255, 0.721); 
    border-radius: 5px; 
    padding: 16px;
  ">
    <!-- 左侧文字区（主内容） -->
    <div style="flex: 1; min-width: 0;">
      <a href="#####novel%20url" target="_blank" style="text-decoration: none;">
        <h3 style="margin: 0; color: white; font-size: 1.2em;">Harry Potter and the Philosopher's Stone</h3>
      </a>
      <div class="summary" style="
        margin: 12px 0; 
        padding: 8px 12px; 
        background-color: rgba(21, 18, 18, 0.584); 
        color: white; 
        border-radius: 4px;
        /* 关键：允许自动换行，不强制单行 */
        white-space: normal;
        word-break: break-word;   /* 中文/连续无空格英文友好 */
        overflow-wrap: break-word; /* 更现代的写法，兼容性佳 */
      ">
        <a href="#####novel%20url" target="_blank" style="text-decoration: none; color: white;">
          bhyxtxyrcyrcccfxxfcccccccccccxccccccccccccccccccccccccccccccccccccccccccccccccf
        </a>
      </div>
      <p style="margin: 8px 0 12px; font-size: 0.95em;">by J.K. Rowling</p>
      <div class="rating" style="margin-bottom: 12px;">
        <span>⭐</span><span>⭐</span><span>⭐</span><span>⭐</span><span>⭐</span>
      </div>
      <div style="display: flex; gap: 8px;">
        <button style="
          padding: 8px 16px; 
          border-radius: 6px; 
          background-color: #a53ee0; 
          border: none; 
          color: white; 
          cursor: pointer;
        ">
          <a href="https://www.amazon.in/..." target="_blank" style="color: white; text-decoration: none;">Read Novel</a>
        </button>
        <button style="
          padding: 8px 16px; 
          border-radius: 6px; 
          background-color: #a53ee0; 
          border: none; 
          color: white; 
          cursor: pointer;
        ">
          <a href="review%20url" target="_blank" style="color: white; text-decoration: none;">Read Review</a>
        </button>
      </div>
    </div>

    <!-- 右侧图片区（固定宽度，自适应高度） -->
    <div style="
      flex-shrink: 0; 
      width: 120px; 
      height: 160px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    ">
      @@##@@
    </div>
  </div>
</div>

? 关键优化说明：

✅ Flexbox 替代 Float：display: flex + gap 确保图文间距一致、无浮动清除问题；flex: 1 让文字区自适应剩余空间，flex-shrink: 0 防止图片被压缩。
✅ 文本换行增强：white-space: normal（默认）+ word-break: break-word + overflow-wrap: break-word 三者协同，确保超长无空格字符串（如乱码或 URL）也能安全折行。
✅ 图片健壮性：使用 object-fit: cover 保持宽高比，overflow: hidden 防止溢出，固定尺寸提升可预测性。
✅ 语义与可访问性：为 <img src="lib1b1.jpg" alt="Book cover" style=" width: 100%; height: 100%; object-fit: cover; "> 添加 alt 属性，按钮内链接使用语义化 <button></button> 包裹（实际开发建议将 <a></a> 提升至按钮层级，或统一用 <button onclick="window.open(...)"></button>）。