reactjs 文本溢出框外,使用React和Flexbox

bxjv4tth  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(142)

我在我的一个React网络应用程序的布局上遇到了一些麻烦。虽然它大部分都能按我想要的那样工作,但情况是这样的。
以下是相关React代码:

<React.Fragment>
<div className="container">
  <div className="row">
    <div className="col-xl-12-w">
      <h1 className='blocTit'>{displayTitle}</h1>
    </div>
  </div>
  <div className="row">
    <div className="col-xl-12-w">
      {clctnBufr.map((item,index) => (
        <div
          key={item.uid}
          className="card float-left"
          style={{ width: "18rem", marginRight: "1rem" }}
        >
          <div className="card-body">
            <div className="card-tit-prx">
              <div className="card-title">
                {displayName(item)}
              </div>
              <div className="card-price">
                {displayPriceC(item.price,this.priceShft,currency)}
              </div>
            </div>
            {displayComment(item)}
          </div>
        </div>
      ))}
    </div>
  </div>
</div>
</React.Fragment>

而这是我认为是相关的CSS代码:

.card-body {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(117, 61, 5);
  background-color: rgb(228, 245, 131);
  padding-block: 5px;
}

.card-tit-prx {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  justify-content:space-between;
}

.card-title {
  color: rgb(52, 8, 155);
  font-family: 'Georgia';
  font-weight: normal;
  font-size: 23px;
  padding-left: 2%;
}

.card-price {
  color: rgb(185, 73, 28);
  font-family: 'Verdana';
  font-weight: normal;
  font-size: 17px;
  padding-right: 2%;
}

下图是显示最后3项问题的屏幕截图,其中部分文本(即:“葱”,“满足”)是溢出的方块外,而不是在里面作为其余的文本。

我也曾尝试过在上下文之外重现这个问题,但没有成功。所以我想知道我是否错过了什么。如果有人知道如何进一步调查,甚至更好地解决这个问题,我会很高兴。
这里是一些更多的信息。通过插入一个空格在显示的价格(见下面的第二个屏幕截图),它使它采取2行和框得到一个适当的大小作为结果。为什么它没有得到这个大小时,名称(左部分)是需要它是一个谜。
但是我不想在显示价格的时候必须插入一个空格!这就是问题所在。

dl5txlt9

dl5txlt91#

我花了一些时间挖掘后终于解决了这个问题。
以防有人碰巧在打类似的案子时读到这篇文章,我报告我所做的。

  • “card-title”* 部分和 “card-price” 部分由于某种神秘原因而没有表现出相同行为的问题来自于 “card-title” 已经在不同的.css文件中定义的事实。这两个定义相互冲突并产生了问题。乍一看很难看出,因为这是另一个。CSS文件没有直接包含在内,我对CSS的工作原理也不是很熟悉。

一个教训似乎是:“在项目中的两个或多个不同位置定义同一CSS项不是一个好主意”

相关问题