Responsive content to list view width in SharePoint 2013

Question

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:

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.

Answer 1

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
}

Answer 2

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)

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

Answer 3

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.