I am using WPForo with a custom WordPress theme. When a topic is created, the topic title does not stay confined within the forum content container and visually extends outside the intended layout area.
This is visible on the forum listing view. The title appears to ignore the container width instead of wrapping or constraining correctly, while the rest of the forum elements (topic meta, avatar, counts) remain aligned as expected.
This does not appear to be a browser resize issue. The overflow is present immediately after topic creation.
I am trying to determine:
• Whether this is a known WPForo + theme compatibility issue
• If WPForo provides a setting to control topic title wrapping or max width
• Or if this must be handled via CSS (e.g. overflow-wrap, word-break, max-width)
If CSS is the correct solution, I would appreciate confirmation of the correct WPForo selector for topic titles so the fix can be applied safely without breaking future updates.
Screenshot attached for reference.
@bbrian017,
wpForo does not have a specific built-in setting to control topic title wrapping or max width. Issues with topic title overflow or wrapping are typically related to custom theme compatibility or CSS conflicts. To fix overflow issues with topic titles, you can use CSS targeting the topic title elements. The correct CSS selector for topic titles in wpForo is usually `.wpf-title` or `.wpf-topic-title` depending on your wpForo version and template. For example, you can add CSS like this to your theme or custom CSS area to control wrapping and overflow:
.wpf-title, .wpf-topic-title {
white-space: normal !important;
word-wrap: break-word !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
}
This will ensure that long topic titles wrap properly and do not overflow their container. Adjust the selectors if needed based on your site's HTML structure. This approach is common for resolving compatibility issues with custom themes affecting topic title display.
I am using divi theme, in the css admin I do have a spot to add custom css, but it doesn't seem to work. Its in there now still. I also went into appearance, customize, and I have added it to the end of the css file , still no luck. View here if you like.
Please replace with this code:
#wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post-title a{
width: 95%; /* Required: container must have a width */
white-space: nowrap; /* Required: keep text on one line */
overflow: hidden; /* Required: hide overflowing text */
text-overflow: ellipsis;
display:block;
}
My goodness I'm such a noob, I went back in to edit and update I I actually added your entire comment not just code lol.. I edited it with your recommendation and it's working perfect. The final outcome was to end with a trailing ... ?
