动态显示多行多跨度

Question

我最近正在对 UI 进行一些更改，并在 Ruby 中编写了一个 html.erb 文件。 作为其中的一部分，我想了解当一个 .

中有多个时，我们如何显示多行文本

例子：

<div>
<span>
<span>"This is span 1. "</span>
<span>"This is span 2. "</span>
<span>"This is span 3."</span>
</span>
</div>

这个显示结果的方式是：

这是跨度 1。这是跨度 2。这是跨度 3。

但是根据我拥有的 div 大小，我希望它动态显示跨度的内容，例如：

这是跨度 1。这是跨度 2。这
是跨度 3.

或

这是跨度 1。这是
跨度 2。这是跨度 3。

需要帮助来理解我可以在 CSS 中使用哪些属性来处理这个问题。

谢谢。

我已经尝试使用一些 CSS 属性通过使用 display:inline-block 和 display:block 来限制 Div 的大小。但这似乎不起作用。

Answer 1

要达到根据 div 内的可用空间动态显示 span 内容的预期结果，您可以使用 CSS 属性，例如 display: inline-block、word-break: break-word 和 white-space: pre-包装。

这是一个更新的例子：

<style>
  .container {
    width: 200px; /* Set the desired width of the container */
    border: 1px solid #ccc;
    padding: 10px;
  }
  
  .span-container {
    display: inline-block; /* Display the spans inline */
    word-break: break-word; /* Allow words to break if needed */
    white-space: pre-wrap; /* Preserve line breaks and wrap text */
  }
  
  .span-container span {
    display: block; /* Display each span on a new line */
  }
</style>

<div class="container">
  <div class="span-container">
    <span>This is span 1.</span>
    <span>This is span 2.</span>
    <span>This is span 3.</span>
  </div>
</div>

在此示例中，span-container 类用于将 span 组合在一起并应用必要的 CSS 属性。 display: inline-block 允许跨度以内联方式显示，而 word-break: break-word 确保长单词可以换行到下一行。 white-space: pre-wrap 保留跨度内的换行符。

通过设置显示：每个跨度的块，它们将显示在跨度容器内的单独行上。

根据您的要求调整容器的宽度，跨度将根据可用空间动态换行和换行。

随意修改 CSS 样式并调整容器宽度以满足您的特定需求。