技术求助：如何让作品集项目区块的标题在内容溢出时保持水平显示

Got it, let's sort out this issue where your project title wraps vertically instead of overflowing horizontally. The core problem here is that text wraps by default when it hits the container's width limit—we just need to tweak a few CSS properties to change that behavior.

Here's the updated CSS for your .project-title class, with key changes highlighted:

.project-container {
  display: grid;
  height: 350px;
  width: 350px;
  background: #c4c4c4;
  margin-bottom: 3%;
}
.project-title{
  height: 45px;
  width: 100%;
  background-color: red;
  margin: 0;
  display: flex;
  align-items: center;
  /* Critical changes to enable horizontal overflow */
  white-space: nowrap; /* Prevents text from wrapping to new lines */
  overflow-x: auto; /* Adds horizontal scrollbar for overflowed content */
  /* Removed the generic `overflow: auto` to target only the x-axis */
}

What each adjustment does: #

• white-space: nowrap;: Forces all title text to stay on a single line, instead of breaking into multiple lines when it hits the 350px width limit.
• overflow-x: auto;: Adds a horizontal scrollbar only when the text exceeds the container's width, so users can scroll to view the full title.

Alternative: Truncate text with an ellipsis #

If you'd prefer to truncate the text with an ellipsis (...) instead of allowing scrolling, use this variation:

.project-title{
  height: 45px;
  width: 100%;
  background-color: red;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden; /* Hides text that overflows the container */
  text-overflow: ellipsis; /* Adds the ellipsis at the end of visible text */
}

Either approach will make your title behave with horizontal overflow instead of vertical wrapping. Test it with your long title text—it’ll stay on one line as expected!

内容的提问来源于stack exchange，提问作者zain