I want the string to be transfered to the next line in lightning. In salesforce classic I would just apply to the element style="word-break: break-all". In lightning there's a special tag for that. But for me it doesn't work. The image below shows the difference in lightning and classic behavior. Classic and lightning compare


<apex:page controller="testController">
<apex:stylesheet value="{!URLFOR($Resource.SLDSXXX, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:pageBlock id="block">
        <div style="word-break: break-all; width: 100px;">
            <p >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong.</p>
        <div class="slds" style="width: 100px;">
           <p class="slds-text-heading--small slds-hyphenate">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong.</p>

slds-hyphenate is a newer tag and was added in version 2.1.2.

Hyphenation utility for non-truncated headings in narrow containers - Utilities › Hyphenation

Update to the latest SLDS css and it will work for you. I just tested it out using 2.1.2 with the following page and it work. Previous SLDS version I had did not work

<apex:page id="slds_long_text_example" sidebar="false" standardStylesheets="false" applyHtmlTag="false" showHeader="false" docType="html-5.0">

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <apex:stylesheet value="{!URLFOR($Resource.SLDS212, 'assets/styles/salesforce-lightning-design-system.min.css')}" />

    <div class="slds">
        <div style="width: 100px">
            <p class="slds-text-heading--small slds-hyphenate">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</p>


  • It worked. Strange, because before posting the question I've tried this, but nothing's changed. Thank you! – EvAzi Sep 14 '16 at 7:01

I had a similar requirement and this worked for me:


<div class="no-text-overflow">


.THIS .no-text-overflow {
    white-space: normal;
    word-wrap: break-word;

The looong text should adjust to <div> size. Tip: it's a best practice use CSS styles defined with classes, so you avoid long in-line styles. Hope it helps.

  • 1
    Why the down vote? is something wrong with my answer? – Joca Sep 13 '16 at 16:13
  • I would summarize that the reason you received a down vote is that the OP is specifically asking about using SLDS and while this answer is correct for HTML (OP already said they know how to do it in classic) it does not answer the OP's question. – Eric Sep 13 '16 at 16:31
  • 1
    Well, this solution actually works for both (lightning and classic). I have my doubts if this question was specifically pointed to work with SLDS since I understand that OP used that as an option, hence my answer was an alternative. – Joca Sep 13 '16 at 16:41
  • Title "Lightning" and "In lightning there's a special tag for that" seems pretty clear OP is looking for answer on why SLDS tag did not work. And OP states "In salesforce classic I would just apply to the element style="word-break: break-all". which means they do not need a HTML solution. – Eric Sep 13 '16 at 17:05
  • 1
    I mean, the original title was string transfer lightning, which was even more vague. I feel like paying close attention to tags can be helpful, but I'm surprised this instance was down-vote worthy. And slds was never tagged. Or really mentioned except in the markup. I don't understand why the question itself would be any more exempt from that voting pattern. (I don't think down-vote was fitting in either case, as the question showed research and the answer was useful). Also note the OP tried word-break: break-all, which is not what's recommended here. – Adrian Larson Sep 14 '16 at 1:39

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.