Question

我有使用引导程序实现的卡。但是我的卡大小根据文本字符的数量而变化。详细信息链接也有所不同，当我缩小浏览器时，它与我的名片文本重叠。如何确定卡片文本（类：card-text）的大小，以避免重叠并避免不同的卡片大小？

<div class="card">
  <div class="img-dimension">
   <img class="card-img-top" src="img.jpg">
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>        
    <div class="card-text">
            <p>
                My long card-text....Phasellus a est. Nam eget dui.
                Pellentesque ut neque. Nunc sed turpis. Donec mi odio,
                faucibus at, scelerisque quis, convallis in, nisi.
            </p> 
    </div>
    <div class="text-left pb-2 pt-2">
        <a href="#">Details...</a>
    </div>
 </div>
</div>

我的CSS代码。我没有更改此引导CSS代码：

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: .75rem;
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.text-left {
    text-align: left!important;
}
.pb-2, .py-2 {
    padding-bottom: .5rem!important;
}
.pt-2, .py-2 {
    padding-top: .5rem!important;
}

Answer 1

文本溢出

这可能会对您有所帮助，您可以根据需要使用它来控制文本的溢出。

例如：

@media only screen and (max-width: 720px) {
  .vc_custom_1541499756394 {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
}

如果您希望网站具有响应能力，则应尝试使用 @media 规则您可以在其中根据分辨率指定确切的更改。

看看此link中的@media规则。

例如：->当浏览器的宽度为600px或更小时，隐藏元素：

 .card-text{
    font-size:19px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

希望这对您有所帮助。

如何设置引导文字和卡片尺寸

1 个答案: