Refinement Word-wrap in Sharepoint 2013


  • Hi all ,

    How set a maximum width on the refinement dropdowns.? and can also how to do word-wrap: break-word; for breaking the words in the dropdowns?

    This refinement is using template via HTML ( MasterPage >> Display Templates >> Filters )

    Please help me..

    Thank you..

    Friday, March 09, 2018 4:15 AM

All replies

  • Hi Unique_,

    To set a maximum width on the refinement dropdowns, we can customize a display template for the refiner where to limit the characters’ number.
    Here are the details:
    Open the directory of Display Templates for refiner.

    open the directory

    A local directory is opened, now we have to navigate to this directory where our Display Templates for refiners are located here:
    \_catalogs\masterpage\Display Templates\Filters

    Above screenshot shows that we use the Display Template named Multi-value Refinement Item for our refiner. In order to limit the characters’ number, we have to do some changes to this Display Template. In the above directory mentioned we can find the html file for this Display Template.

    Open this html file with Visual Studio (you can use whatever editor you like to open this file) .

    For safety, we don’t modify this file directly. As an alternative, we have to copy both this file and the JavaScript file specified in above screenshot. We create a new folder titled custom08 to store and rename the two files, a html file and a JavaScript file.

    Now, we have to edit their content according to our requirements.
    In Custom_Filter_MultiValue.html

    In Custom_Filter_MultiValue_Body.js, we limit the length of characters to 20 (including the ellipsis) and show the additional characters with “…”.

    Save the two files, and re-edit the refiner web part. Select the Display Template we just customized. Save and apply all the configuration.

    Now, refresh the page.

    It would be better if you open up a new thread for the new question. And others will focus on your new issue and give their suggestions.

    This will make answer searching in the forum easier and be beneficial to other community members as well.

    Thank you for your understanding.

    Best Regards,

    Lisa Chen

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact

    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, March 09, 2018 9:15 AM
  • Hi Lisa Chen1226,

    I try to download a copy and insert the javascript back but error. it's that I need to remove and inserting back??

    Can I know, if I just edit via HTML only and embed the Css code , it's that possible??

    any solution?

    Please help me.

    Thank you..

    Friday, March 09, 2018 9:37 AM