1

I would like to add a word break at the checkout page via custom CSS but I'm not getting an expected result.

1. I have a heading like below:

enter image description here

2. I would like to change it as below:

enter image description here

3. But getting the below result:

enter image description here

HTML:

<span class="step-title" data-bind="i18n: 'Contact Person/Delivery Recipient'">Kontaktperson/Leveransmottagare</span>

CSS:

.xxxxx {
        word-wrap: break-word;
        display:block;
        width:156px;
    }

Could anyone please help me to get the desired result?

  • did you try my answer below? – fmsthird Apr 25 at 10:36
  • @magefms Yes, I have tried but that's not working. – Siva Apr 25 at 11:01
  • why it is .xxxxx? is that the actual code? – fmsthird Apr 25 at 11:01
  • @magefms No, it's not an actual code. The actual code is <div class="contact-delivery-title"> <span class="step-title" data-bind="i18n: 'Contact Person / Delivery Recipient'">Kontaktperson / Leveransmottagare</span> </div> So I have put the class name .contact-delivery-title .step-title which is in .xxxxx – Siva Apr 25 at 12:02
  • no not like that, you can do it like span.step-title – fmsthird Apr 25 at 12:06
0

Use BR Tag

<span class="step-title" data-bind="i18n: 'Contact Person/Delivery Recipient'">Kontaktperson/<br>Leveransmottagare</span>

not need to add css for word break for span element

  • I don't want to edit the html file. I just want to have this result via CSS. Since I need this output only in the mobile device. – Siva Apr 25 at 12:26
  • so need add space Kontaktperson/ Leveransmottagare like this otherwise not possible what you need – Savan Patel Apr 25 at 12:38
  • this is like a full paragraph Kontaktperson/Leveransmottagare so not possible what you need – Savan Patel Apr 25 at 12:46
  • Thanks for your information! – Siva Apr 25 at 12:50
  • It's my pleasure – Savan Patel Apr 25 at 13:01
-1

Please try with this

value normal / initial - Break words only at allowed break points

break-word - Allows unbreakable words to be broken

.xxxxx {
    word-wrap: normal;
    display:block;
    width:156px;
}
  • I have tried it but not working – Siva Apr 25 at 9:38
  • Please have you checked your CSS code updated in browser? – Shailesh Katarmal Apr 25 at 11:29
  • 1
    Yes, I have checked and see the CSS code updated in browser but I didn't get the desired result. – Siva Apr 25 at 12:00

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.