使用 CSS 将文本分成行答案

【问题标题】：Using CSS to divide text into rows使用 CSS 将文本分成行
【发布时间】：2017-05-23 17:46:38
【问题描述】：

在我的 wordpress / woocommerce 网站上，我有很多产品选项，在我的购物车中显示这些选项 - 选择的选项以流畅的文本呈现，而不是每行有一个选项，这看起来更有条理并且会更容易阅读。

我的问题是，如果可能的话，使用 CSS 将流畅的文本构造成行，CSS 将是我解决它的最方便的方法，尽管我也愿意接受其他选择。

尝试将以下产品添加到购物车LINK 添加到购物车按钮以我的语言显示“LÄGG TILL I KUNDVAGN”。然后去CART。

正如您在标题下方和产品图片旁边的第一列中看到的那样 - 常规文本中的选项类型然后 : 和粗体文本中选择的选项。前两个选项是“Bredd：5 (480 mm) Höjd: 5 (480 mm)”

我想要的是这样显示：

繁育：5 (480 mm)

Höjd：5（480 毫米）

等等

这个问题有简单的解决方案吗？最好还是通过 CSS？

提前非常感谢！

【问题讨论】：

如果您想从用户那里得到良好的回应，我建议您发布一些代码或问题的一些图片，而不是链接到未知网站。

标签： html css wordpress woocommerce

【解决方案1】：

如果您想将所有项目堆叠起来，请申请

.variation{ 
 display: flex;
 flex-direction: column;
}

【讨论】：

完美！非常感谢！ :)
乐于助人:)

【解决方案2】：

您可以为此使用flexbox。添加以下 CSS 以解决此问题

.tm-cell {  /*Or you can update your selector*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

【讨论】：

【解决方案3】：

如果您检查 html 代码，您可以看到条目周围的 div 是： <div data-uniqid="58ede56aeca6c6.03775072" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-6 cpf-type-select prod-height-div">

它的类宽度设置为 50%，因此您可以通过将其添加到您的 css 中将其设置为 100%：

.tm-extra-product-options .col-6, 
.tm-extra-product-options .tm-cell.col-6, 
.tc-cell.tc-col-6, .tc-col-6 {
    width: 100% !important;
}

【讨论】：