html - 如何使用CSS来打破文本行

Question

我有一些文本想分成两部分。据我了解，这可以使用 css display 来完成 -(参见 W3 School)问题是当我尝试使用 display: table-column 或 display: table-column-group 例如，它应该把我的文本放在一个列中并划分，(W3 学校)文本从页面中消失。一旦我使用 display: inherit; 但是，例如，(一行中的所有文本)它会重新出现。

<div class="awpcp-listing-excerpt $awpcpdisplayaditems $isfeaturedclass" data-breakpoints-class-prefix="awpcp-listing-excerpt" data-breakpoints='{"tiny": [0,328], "small": [328,600], "medium": [600,999999]}'>
<div class="awpcp-listing-excerpt-thumbnail">
    $awpcp_image_name_srccode
</div>
<div class="awpcp-listing-excerpt-inner" style="w">
    <h4 class="awpcp-listing-title">$title_link</h4>
    <div class="awpcp-listing-excerpt-content">$excerpt</div>
</div>
<div class="awpcp-listing-excerpt-extra">

    $awpcp_city_display
    $awpcp_state_display
    $awpcp_display_adviews
    $awpcp_display_price
    $awpcpextrafields

CSS:

.awpcp-listing-title {display: table-column !important;} 

Answer 1

我花了一段时间，但这似乎奏效了。

.awpcp-listing-title {
background-color: 
unset;position: unset; padding: 
unset; font-size: 12px; margin- 
left:-80px; margin-right: 120px;

负 margin-left 的组合用于定位文本，而 margin-right 似乎已将其压缩为 3 行。