如何实现文本不超出div容器？附HTML卡片示例与CSS代码

Hey there! Let's sort out that text spilling outside your categorylist-item div. Looking at your Bootstrap-based code, the issue happens because your fixed-width col-md-4 container can't handle long text (especially those Swedish compound words) without explicit CSS rules. Here are targeted solutions for your exact setup:

1. Force Text to Wrap (Basic Fix) #

If long words are pushing text outside the container, add these rules to ensure even lengthy terms break into multiple lines:

/* Apply to both your h4 and description text */
.container.home .categorylist-item h4,
.container.home .categorylist-item .description {
  /* Cross-browser word wrapping for long terms */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Ensure elements respect the container's full width */
  width: 100%;
  box-sizing: border-box;
}

word-wrap and overflow-wrap work together to split overlong words, so they won't spill past the container's edges.

2. Truncate Text with Ellipsis (Clean, Card-Friendly Fix) #

If you want to limit text to a specific number of lines and show an ellipsis when it overflows (super common for card layouts), use the line-clamp method:

/* For your h4 (limit to 1 line) */
.container.home .categorylist-item h4 {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px; /* Fill in your original margin value here */
  /* Line clamp setup */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* For your description text (limit to 2 lines, adjust as needed) */
.container.home .categorylist-item .description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Add word wrapping to soften long word breaks */
  word-wrap: break-word;
}

Note: This uses WebKit prefixes, but it's supported by all modern browsers. Adjust the -webkit-line-clamp value to change how many lines you want to show before truncating.

3. Lock Down the Container Itself #

Make sure your categorylist-item container doesn't let content escape its bounds:

.container.home .categorylist-item {
  /* Prevent any content from spilling outside */
  overflow: hidden;
  /* Optional: Add padding to keep text from touching the container edges */
  padding: 1rem;
}

Quick Why-This-Happened Note #

Your original CSS only styled the h4's font size and weight, but didn't include any rules to handle text overflow. When the text length exceeded the fixed width of the col-md-4 column, it naturally spilled outside.

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