1

I have a little question for you:

I would like to display Webpart Title in 2 lines. So, from

My Superbe Webpart Title

going to

My Superbe
Webpart Title

Simple, right?

So i tried it, but i always end up with a word wrap and "..." I checked the HTML Structure, and the title is encapsulated in a <nobr> tag! Which are obsolete (better to do white space and wordwrap in css).

Could you help me to know where the title HTML is generated, and to know how i could manage to display my webpart titles on 2 lines?

Thanks a lot.

Gaëlle

2

If you can grab the offending NOBR element via JavaScript, you can then hide it and insert a less offensive element adjacent to it with the same (or modified) HTML content.

// 1. grab the NOBR tag via CSS selector
var nobr = document.querySelector(".ms-standardheader.ms-WPTitle nobr");
// NOTE: Replace above CSS Selector with one that grabs the title of your web part
// 2. hide the NOBR tag
nobr.style.display = "none"; 
// 3. add a span tag with the same contents
nobr.insertAdjacentHTML("afterend","<span>"+nobr.innerHTML+"</span>"); 

Note that you could do additional manipulation to the HTML content by messing around with nobr.innerHTML before you call insertAdjacentHTML()

Note also that if you want to manipulate multiple web part titles that match a specified query selector, you can use var nobrs = document.querySelectorAll("..."); and then loop through the resulting element array.

  • Hi @Thriggle! Thanks a lot for your answer, though i already tried some dirty code (like a dirty javascript to remove <nobr> elements and some css to make my title going 2 lines) You wrote a very documented and complete answer, so thanks a lot for that, it will surely help me later! – Gaelle Feb 23 '15 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.