5

When I change the width of a SharePoint list to a certain amount of Pixels, I have the problem that some content of the list gets cut off on the right side - see the following Screenshot:

enter image description here

Is there any trick, that SharePoint automatically wraps text or adjusts the width of pictures (in other words: adjusts the content) to the chosen list width - so that content won't get cut off?

I unfortunately do not have permissions to use SharePoint-Designer. I am working with SharePoint 2013 On-Premise.

For further information: The list is based on the announcement app.

5
+50

As Martijn was saying, CSS is fairly likely to work. Rather than using the .ms-forceWrap etc, try using .TextFieldClass { word-wrap: break-word !important; }. The !important component overrides any pre-existing word-wrap that's not also labeled as !important.

You'll have to note that this only wraps around its parent container so you may have to size other components as well... To do this one option is for each container to .TextFieldClass you'll have to put something like .MakeSmallContainers { box-sizing: border-box; width: 100% }. Where the box-sizing includes the padding and border with the width (if there is any) and width goes to the entire inside of its parent.


Alternatively you can do javascript/jquery injecting these css changes, which could be a viable option but you'll need to make sure the javascript is run after the page contents of the SP page is done loading. To do this you'll need to call the function with _spBodyOnLoadFunctionNames since the contents of SP 2013's pages do not fully load with the DOM.

_spBodyOnLoadFunctionNames.push("fixWebPartClipping");
function fixWebPartClipping() {
    // your code here
}
3

With CSS it's hard to know for sure, but this might be a direction to find a solution. E.g. the CSS word wrap property: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

With a browser (I prefer Chrome to do this) you press F12 on the keyboard and inspect the element. First click the button (blue), then click the element you want to inspect (red) and you can change the css in the bottom right part (green) enter image description here

If that works and you find a way to wrap text, find a CSS Selector and put the CSS code in a content editor webpart or script editor webpart like. See an example here: https://www.kalmstrom.com/Tips/SharePoint-Online-Course/Content-Editor-CSS.htm

  • Thanks for your answer. Is there also a CSS-wrap-property for images then? – SteffPoint Jul 30 '18 at 7:10
  • 1
    This might point you in the right direction: w3schools.com/howto/howto_css_image_responsive.asp. It's not word wrap, but it maximizes the width to 100% of the container. If that doesn't work, you need to go up the hierarchy of your HTML and apply the same properties, as the container might be to wide. – Oak3 Jul 30 '18 at 7:18
  • Hey Martjin, sorry but I couldn't make it following your tutorial. It doesn't want to wrap the text - even when I use predefined classes like ".ms-forceWrap" or ".ms-normalWrap". Is there maybe any way via JavaScript or jQuery? – SteffPoint Jul 31 '18 at 11:53
  • CSS is the way to go. Unfortunately CSS is not easy and definately not in SharePoint. See the answer from KGLasier for further guidance. – Oak3 Aug 1 '18 at 7:46
0

How did you restrict the width of the list view? Depending on where you add the restriction, the text should naturally reflow without further corrective code. So this could maybe be solved by changing how you changed the list width.

For example, this CSS code will restrict the width and the text will reflow within the constrained width:

.ms-listviewtable {
   max-width: 500px;
}

Or, maybe the list table cell has CSS applied that is forcing a width wider than what is allowed. Based on the screenshot you shared I can tell that the SharePoint site has been customized. By default CSS shows the contents of a table cell in full. A modification has to be added in order to change the overflow, like what your screenshot shows. Instead of fixing what is broken, I would suggest finding what broke it.

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.