Question

我有一些文本想分成两部分。据我了解，可以使用css display-（请参阅W3学派）完成此操作，问题是，例如，当我尝试使用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行。

如何使用CSS打破文字行

1 个答案: