Question

我正在尝试设计卡片，但是我的<p>文本是内联的。我不要我尝试了display: block;和其他选项，但这没用。

我使用Bootstrap和CSS，但据我所知，这是一个普通的CSS问题。

这是我一张卡片的HTML：

<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body text-center">

  <h1>{{offer.name}}</h1>
  <p>{{offer.description}}</p>
  <h2>{{offer.price}}€</h2>
</div>

这里是我的SCSS：

$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;

$color_price: #F96D00;
$color_description: #b8b8b8;

.card {
    border-radius: 0;

    .card-body {
        padding: 3rem;

        h1 {
            font-family: $font-serif;
            font-weight: bold;
            line-height: 1.45;
            font-size: 26px;
        }

        h2 {
            font-family: $font-serif;
            font-weight: bold;
            line-height: 1.45;
            font-size: 22px;
            color: $color_price;
        }

        p {
            font-family: $font-serif;
            line-height: 1.45;
            font-size: 18px;
            color: $color_description;
            height: 100px;
        }
    }
}

它看起来像这样：

编辑：问题是该段落的宽度可变，但是其中的文本总是内联且比段落本身更宽。

Answer 1

您不需要在text-align：center上使用overflow：hidden或！important。

您需要在作为P父级的卡片元素上设置最大宽度。查看您在Codepen中呈现的样式： https://codepen.io/NeilWkz/pen/vaaMoO

名称和价格左对齐，描述居中对齐。

这是因为您使用了辅助类“文本中心”，所以我认为这来自于您在问题中未提及的某个框架。如果在h1或h2元素上设置了对齐方式，则帮助程序类将不会向下层叠，在这种情况下，您需要将其应用于实际元素：

HTML：

<div class="">
    <div class="card">
        <img class="card-img-top" src="../../../assets/images/offer_1.jpg">
        <div class="card-body">
        <h1 class="text-center">{{offer.name}}</h1>
        <p class="text-center">{{offer.description}}</p>
        <h2 class="text-center">{{offer.price}}€</h2>
    </div>
</div>

SCSS：

$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;

$color_price: #F96D00;
$color_description: #b8b8b8;

.card {
    border-radius: 0;
    //Added width & background color for demo
    width: 320px;
    background: azure;
 .text-center {
    text-align: center;
  }
.card-body {
    padding: 3rem;
    display: block;

h1 {
    font-family: $font-serif;
    font-weight: bold;
    line-height: 1.45;
    font-size: 26px;
    display: center;
}

h2 {
    font-family: $font-serif;
    font-weight: bold;
    line-height: 1.45;
    font-size: 22px;
    color: $color_price;
}

p {
    font-family: $font-serif;
    line-height: 1.45;
    font-size: 18px;
    color: $color_description;
    height: 100px;

}
}
}

这是一支具有上述样式的工作笔： https://codepen.io/NeilWkz/pen/gjjJpw

CSS：不应该在段落内联显示

1 个答案: