long name broke page layout

[jerryd]

The page layout has been broken if long name was given

[sharmstr]

Try this css

COPY CODE

.buddypress div#item-header div#item-meta p {
    overflow: visible;
    word-wrap: break-word;
}

#main .alternate-color h1 {
    max-width: 80% !important;
    word-wrap: break-word;
}

.widget.buddypress div.item-title {
    word-wrap: break-word;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jerryd]

it seems not working~~:(

[jerryd]

the description will have same issue if it is too long~~

[jerryd]

the message has same issue as well.

[sharmstr]

I need to see a link for the one that’s not working.

for messages

COPY CODE

#message-subject {
    word-wrap: break-word;
    max-width: 95%;
}
.message-content {
    word-wrap: break-word;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jerryd]

cos, I installed locally, haven’t deployed yet. so I donn’t have the link, sorry about that.

the attachment is about group directory page

[jerryd]

why don’t set a max length for these fields?

[jerryd]

this is the breadcrumb title

[sharmstr]

COPY CODE

.item-desc {
    width: 95%;
}
#groups-dir-list .item-desc p {
    overflow: hidden;
    word-wrap: break-word;
}
#groups-dir-list .item-title a {
    word-wrap: break-word;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jerryd]

others are now working, but the breadcrumb still doesn’t work with this code

COPY CODE

#main .alternate-color h1 {
    max-width: 80% !important;
    word-wrap: break-word;
}

[Abe]

Hello, for the page title this should work:

COPY CODE

.main-title .page-title {
    clear: left;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

The codes will be part of the next theme version so after the next theme update you can remove the custom codes

Many thanks @sharmstr, you are the best 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

or if you want the text visible:

main-title .page-title {
    word-wrap: break-word;
    max-width: 100%;
}
 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jerryd]

It is glad to see this will be fixed in next release.
Thanks guys, you are the best. 🙂

[Author]

Posts