javascript - 根据显示的字数有限制高度

Question

目前我有水平对齐的卡片，我希望高度相等。这些卡片包含从我的 API 获取的图像、标题和段落。参考图片：

一些卡片的图像和段落比其他卡片大，这让我的对齐变得混乱。我希望能够根据高度而不是根据字数限制卡片中显示的字数，以便可以为每张卡片固定，最后一个字应该显示...如果段继续。

CodeSandBox：https ://codesandbox.io/s/sad-allen-4jsst?file=/src/App.tsx

代码：

<div className="col-lg-4 col-md-6 col-sm-6 col-12">
              <div
                style={{
                  display: "block",
                  marginBottom: "20px",
                  cursor: "pointer",
                  textAlign: "center",
                  background: "#FEFEFE",
                  boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
                  borderRadius: "10px"
                }}
              >
                <div>
                  <img src="blogContent.png" style={{ width: "100%" }} /> //Small Image
                </div>
                <div style={{ padding: "20px", textAlign: "start" }}>
                  <div style={{ color: "#0E2043", fontSize: "13px" }}>
                    Biometric Passport
                  </div>
                  <div
                    style={{
                      color: "#0E2043",
                      fontSize: "15px",
                      fontWeight: "600",
                      marginTop: "10px"
                    }}
                  >
                    Commonwealth Of Dominica Announces The Launch of its New
                    Biometric Passport
                  </div>
                  <div
                    style={{
                      color: "#0E2043",
                      fontSize: "13px",
                      marginTop: "10px"
                    }}
                  >
                    {" "}
                    //Small Content
                  </div>
                  <div
                    style={{
                      color: "#E3AB50",
                      fontSize: "13px",
                      marginTop: "10px"
                    }}
                  >
                    Read More
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-6 col-sm-6 col-12">
              <div
                style={{
                  display: "block",
                  marginBottom: "20px",
                  cursor: "pointer",
                  textAlign: "center",
                  background: "#FEFEFE",
                  boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
                  borderRadius: "10px"
                }}
              >
                <div>
                  <img src="content2.png" style={{ width: "100%" }} /> //big Image
                </div>
                <div style={{ padding: "20px", textAlign: "start" }}>
                  <div style={{ color: "#0E2043", fontSize: "13px" }}>
                    Biometric Passport
                  </div>
                  <div
                    style={{
                      color: "#0E2043",
                      fontSize: "15px",
                      fontWeight: "600",
                      marginTop: "10px"
                    }}
                  >
                    Commonwealth Of Dominica Announces The Launch of its New
                    Biometric Passport
                  </div>
                  <div
                    style={{
                      color: "#0E2043",
                      fontSize: "13px",
                      marginTop: "10px"
                    }}
                  >
                    {" "}
                    // Big content
                  </div>
                  <div
                    style={{
                      color: "#E3AB50",
                      fontSize: "13px",
                      marginTop: "10px"
                    }}
                  >
                    Read More
                  </div>
                </div>
              </div>
            </div>

标签： javascripthtmlcssreactjs

Answer 1

您可以将此 div 设置为 textarea ，然后您可以使用 maxlength=yourNumber 属性限制单词。此外，您必须隐藏在 CSS 边框中设置的边框：无。

为了将您的图像设置为相同的大小，您应该将 div 设置为固定大小。

像这样的东西：

<div style={{width:'30px',height:'30px'}}>
<img src="blogContent.png" style={{ width: "100%"} }/>  
</div>