TileView: How to set a Return in the displayed title

Question

I'm trying to layout the text of the first Tile (see my first Screenshot) like the second one (simply moving up the text part "gelenkte" and aligning the "Dokumente" to the left)

I didn't find any solution yet by simply editing it in the promoted links list view, but I guess there might be any solution for it. I think someone of you might have a working idea for it.

On the other hand, if there is no possbility to do this with standard SharePoint practises, I will try to realise it with CSS.

I'm using SharePoint 2013. I also accept "tricking" answers as useful, if they work :)

Answer 1

The following CSS should work for you as it does work for me:

.ms-tileview-tile-detailsListMedium {
    padding-right: 30px;
}

This is not a "tricking" solution, but a supported solution. You are allowed to change the CSS of SharePoint as you wish, especially when you have your own masterpage. By changing the CSS of SharePoint I mean create your own CSS file, not amend the out-of-the-box CSS files.

You can apply the CSS above to either one page or to the entire site collection. I recommend to apply the CSS to the entire site collection for consistency. To do this, add the CSS above to a CSS file and reference the CSS file in your masterpage if you're using a custom one, or even better do these steps (if you have the Publishing feature activated):

1. Go to the root site of the site collection.
2. Upload the CSS file in your Style Library (or any library really).
3. Go to site settings.
4. Go to Master page.
5. Expand the "Alternate CSS URL" section.
6. Select the "Specify a CSS file to be used by this site and all sites that inherit from it" option.
7. Browse and select the CSS file you uploaded earlier in the Style Library.
8. Click OK.

Answer 2

Use this Code here, because it won't move the details to the left.

.ms-tileview-tile-titleTextMediumCollapsed {
padding-right: 30px;
}