Question

有没有办法强制文本的一部分用CSS显示在新行上？

所以当HTML看起来像这样：

<p>Hello, my name is John.</p>

结果将是：

您好，

我的名字是约翰。

HTML是动态生成的，所以我无法改变它。

Answer 1

p::before {
  float:right;
  width:calc(100% - 3.6em); height:1em;
  content:'';
}

<p>Hello, my name is John.</p>

请注意，这是相当烦躁的：3.6em介于“Hello”的宽度和“Hello，my”的宽度之间。所以这取决于字体以及你需要它打破的单词。我不得不尝试使用不同的字体来找到一个好的平均尺寸。

Answer 2

SELECT ID, post_date, GROUP_CONCAT(order_items separator '\n') AS order_items, post_status, shipping_flight_number, letter_code, terminal, order_total, full_name
FROM (
   SELECT 
  p.ID, 
  date(p.post_date) AS post_date,
  p.post_status AS post_status,
  concat_ws(' ', max( CASE 
                 WHEN o.meta_key = '_qty' and 
                      i.order_item_id = o.order_item_id 
                    THEN o.meta_value 
              END ), i.order_item_name, ' -- ', max( CASE WHEN pm.meta_key = '_sku' and p.ID = pm.post_id and p.post_type = 'product' THEN pm.meta_value END )) as order_items,
  max( CASE WHEN pm.meta_key = 'shipping_flight_number' and p.ID = pm.post_id THEN pm.meta_value END ) as shipping_flight_number,
  substring_index(max( CASE WHEN pm.meta_key = 'shipping_flight_number' and p.ID = pm.post_id THEN pm.meta_value END )," ",1) as letter_code,
  ( select terminal_id from wp_shipping_airlines where letter_code = substring_index(max( CASE WHEN pm.meta_key = 'shipping_flight_number' and p.ID = pm.post_id THEN pm.meta_value END )," ",1)) as terminal,
  max( CASE WHEN pm.meta_key = '_order_total' and p.ID = pm.post_id THEN pm.meta_value END ) as order_total,
  concat(max( CASE WHEN pm.meta_key = '_billing_first_name' and p.ID = pm.post_id THEN pm.meta_value END ), ' ', max( CASE WHEN pm.meta_key = '_billing_last_name' and p.ID = pm.post_id THEN pm.meta_value END )) as full_name
FROM wp_posts AS p
LEFT JOIN wp_postmeta pm on p.ID = pm.post_id
LEFT JOIN wp_woocommerce_order_items AS i ON p.ID = i.order_id 
LEFT JOIN wp_woocommerce_order_itemmeta AS o ON i.order_item_id = o.order_item_id 
WHERE p.post_type = 'shop_order' AND i.order_item_type = 'line_item' AND p.post_status != 'trash'
GROUP BY i.order_item_name, p.ID) AS t
GROUP BY ID, post_date, shipping_flight_number, letter_code, terminal, order_total, full_name

或只是添加其他Hello, my name is John.代码

<p></p>

Answer 3

但是这甚至没有考虑自动分割线的位置。如果你想要更自动化的东西，你需要使用php或javascript。

以下是另一个链接的示例： SPLIT HTML INTO different lines

检查并告诉我它是否对您有帮助。

由于小号

Answer 4

有很多方法可以做到。

首先正在使用HTML的 元素

<p>Hello,<br> my name is John.</p>

第二个是将它们都放在标记

中

<p>Hello,</p>
<p>my name is John.</p>

第三次是将它们都放在标记中，并带有css属性和值clear:both - 这是为了确保没有元素会在左侧或右侧浮动

尝试下面的代码并希望它可以帮助您。

＆＃13;

p {
  clear: both;
}

＆＃13;

<p>Hello,</p>
<p>my name is John.</p>

＆＃13;

所有输出

您好，

我的名字是约翰。

Answer 5

简短的回答是，如果不在文本之间编写代码，就无法拆分文本。

请按照此链接提供良好的解决方案。

How to give line-break from css, without using ?

将文本拆分为两行

5 个答案: