时间戳

首页 > 解决方案 > 将文本宽度优化为弹性盒装卡片

html - 将文本宽度优化为弹性盒装卡片

问题描述

我有一张卡片，我输入了“display: flex;” 对它和其他样式在代码段中检查它

120px我希望文本在其宽度达到或时以新行开始7.5em

.card{
  width: 269px;
    margin-bottom: 3.5625rem;
    display: flex;
    flex-direction: column;
    /* border: 1px solid rgba(177, 181, 190, 0.28); */
    box-shadow: 0px 0px 0px 1px rgba(177, 181, 190, 0.315);
    border-radius: .5625rem;
    transition: .2s all var(--primary-ease);
}.card:hover{
    box-shadow: 0px 7px 38px 0px #354f4d3b;
}.card:hover .card-title {
    color: var(--primary-light);
}
.card-header{
    background-color: #6484ED;
    padding: 26px 70px;
    border-radius: .5625rem .5625rem 0 0;
}
.card-info{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: 17px;
}
p.card-title{
    position: static;
    width: 50%;
}
<div class="card">
                    <div class="card-header">
                        <svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="54.5" cy="54.5" r="54.5" fill="white"/>
</svg>

                        <p class="remove-defaults" style="font-family: Cairo;font-style: normal;font-weight: 600;font-size: 10px;line-height: 19px;color:#fff;">circle</p>
                    </div>
                    <div class="card-info">
                        <p class="card-title strong np">asctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassd</p>
                        <div class="new"></div>
                        <p class="text-xs np">web education</p>
                    </div>
                </div>

标签： htmlcssflexbox

解决方案

听起来像是一份工作word-break

.card {
  width: 269px;
  margin-bottom: 3.5625rem;
  display: flex;
  flex-direction: column;
  /* border: 1px solid rgba(177, 181, 190, 0.28); */
  box-shadow: 0px 0px 0px 1px rgba(177, 181, 190, 0.315);
  border-radius: .5625rem;
  transition: .2s all var(--primary-ease);
}

.card:hover {
  box-shadow: 0px 7px 38px 0px #354f4d3b;
}

.card:hover .card-title {
  color: var(--primary-light);
}

.card-header {
  background-color: #6484ED;
  padding: 26px 70px;
  border-radius: .5625rem .5625rem 0 0;
}

.card-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  padding: 17px;
}

p.card-title {
  position: static;
  width: 50%;
  word-break: break-word;
}
<div class="card">
  <div class="card-header">
    <svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="54.5" cy="54.5" r="54.5" fill="white"/>
</svg>

    <p class="remove-defaults" style="font-family: Cairo;font-style: normal;font-weight: 600;font-size: 10px;line-height: 19px;color:#fff;">circle</p>
  </div>
  <div class="card-info">
    <p class="card-title strong np">asctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassd</p>
    <div class="new"></div>
    <p class="text-xs np">web education</p>
  </div>
</div>

推荐阅读