How to make a word break for span element?How to make magento WYSIWYG styles workWhy the input element id's for one-page-checkout are in “type:elementname” format?can't figure out how to make iframe full widthhow to create and make a custom.css file workHow to make css changes in magento 2.2Need help with CSS for placing span on top of an input fieldLoad Custom CSS After style-l.css For Home PageMake sticky header for Magento 2 problemMagento 2: How to make the phone number optional?How to make some products shippable only to one city at checkout page

When to use 1/Ka vs Kb

How to create an ad-hoc wireless network in Ubuntu

Possible to set `foldexpr` using a function reference?

Did Henry V’s archers at Agincourt fight with no pants / breeches on because of dysentery?

Are Boeing 737-800’s grounded?

Phrase for the opposite of "foolproof"

Weird result in complex limit

How to replace the "space symbol" (squat-u) in listings?

Minimum value of 4 digit number divided by sum of its digits

Will tsunami waves travel forever if there was no land?

Does jamais mean always or never in this context?

Historically, were women trained for obligatory wars? Or did they serve some other military function?

Is thermodynamics only applicable to systems in equilibrium?

What is the difference between `a[bc]d` (brackets) and `ab,cd` (braces)?

Colliding particles and Activation energy

If Earth is tilted, why is Polaris always above the same spot?

What's the metal clinking sound at the end of credits in Avengers: Endgame?

When did stoichiometry begin to be taught in U.S. high schools?

Multiple options for Pseudonyms

Transfer over $10k

Pressure to defend the relevance of one's area of mathematics

How to set the font color of quantity objects (Version 11.3 vs version 12)?

"ne paelici suspectaretur" (Tacitus)

Is it cheaper to drop cargo drop than to land it?



How to make a word break for span element?


How to make magento WYSIWYG styles workWhy the input element id's for one-page-checkout are in “type:elementname” format?can't figure out how to make iframe full widthhow to create and make a custom.css file workHow to make css changes in magento 2.2Need help with CSS for placing span on top of an input fieldLoad Custom CSS After style-l.css For Home PageMake sticky header for Magento 2 problemMagento 2: How to make the phone number optional?How to make some products shippable only to one city at checkout page






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








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?










share|improve this question
























  • did you try my answer below?

    – magefms
    Apr 25 at 10:36












  • @magefms Yes, I have tried but that's not working.

    – Magento vsmarttec
    Apr 25 at 11:01











  • why it is .xxxxx? is that the actual code?

    – magefms
    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

    – Magento vsmarttec
    Apr 25 at 12:02












  • no not like that, you can do it like span.step-title

    – magefms
    Apr 25 at 12:06

















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?










share|improve this question
























  • did you try my answer below?

    – magefms
    Apr 25 at 10:36












  • @magefms Yes, I have tried but that's not working.

    – Magento vsmarttec
    Apr 25 at 11:01











  • why it is .xxxxx? is that the actual code?

    – magefms
    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

    – Magento vsmarttec
    Apr 25 at 12:02












  • no not like that, you can do it like span.step-title

    – magefms
    Apr 25 at 12:06













1












1








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?










share|improve this question
















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?







css checkout-page






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Apr 25 at 10:31







Magento vsmarttec

















asked Apr 25 at 6:08









Magento vsmarttecMagento vsmarttec

39519




39519












  • did you try my answer below?

    – magefms
    Apr 25 at 10:36












  • @magefms Yes, I have tried but that's not working.

    – Magento vsmarttec
    Apr 25 at 11:01











  • why it is .xxxxx? is that the actual code?

    – magefms
    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

    – Magento vsmarttec
    Apr 25 at 12:02












  • no not like that, you can do it like span.step-title

    – magefms
    Apr 25 at 12:06

















  • did you try my answer below?

    – magefms
    Apr 25 at 10:36












  • @magefms Yes, I have tried but that's not working.

    – Magento vsmarttec
    Apr 25 at 11:01











  • why it is .xxxxx? is that the actual code?

    – magefms
    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

    – Magento vsmarttec
    Apr 25 at 12:02












  • no not like that, you can do it like span.step-title

    – magefms
    Apr 25 at 12:06
















did you try my answer below?

– magefms
Apr 25 at 10:36






did you try my answer below?

– magefms
Apr 25 at 10:36














@magefms Yes, I have tried but that's not working.

– Magento vsmarttec
Apr 25 at 11:01





@magefms Yes, I have tried but that's not working.

– Magento vsmarttec
Apr 25 at 11:01













why it is .xxxxx? is that the actual code?

– magefms
Apr 25 at 11:01





why it is .xxxxx? is that the actual code?

– magefms
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

– Magento vsmarttec
Apr 25 at 12:02






@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

– Magento vsmarttec
Apr 25 at 12:02














no not like that, you can do it like span.step-title

– magefms
Apr 25 at 12:06





no not like that, you can do it like span.step-title

– magefms
Apr 25 at 12:06










3 Answers
3






active

oldest

votes


















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






share|improve this answer























  • 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.

    – Magento vsmarttec
    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!

    – Magento vsmarttec
    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;






share|improve this answer

























  • I have tried it but not working

    – Magento vsmarttec
    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.

    – Magento vsmarttec
    Apr 25 at 12:00


















-1














Your code is right, you just have to add !important in display attribute to make sure it will be the priority CSS attribute to be applied.



span.step-title 
word-wrap: break-word;
display:block !important;
width:156px;



Or apply the wrap in the main div container:



.contact-delivery-title 
word-wrap: break-word;
display:block !important;
width:156px;






share|improve this answer

























  • I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

    – Magento vsmarttec
    Apr 25 at 12:20











  • @Magentovsmarttec you can adjust width like 200 and it will be good

    – magefms
    Apr 25 at 13:29












Your Answer








StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f272363%2fhow-to-make-a-word-break-for-span-element%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























3 Answers
3






active

oldest

votes








3 Answers
3






active

oldest

votes









active

oldest

votes






active

oldest

votes









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






share|improve this answer























  • 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.

    – Magento vsmarttec
    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!

    – Magento vsmarttec
    Apr 25 at 12:50











  • It's my pleasure

    – Savan Patel
    Apr 25 at 13:01















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






share|improve this answer























  • 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.

    – Magento vsmarttec
    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!

    – Magento vsmarttec
    Apr 25 at 12:50











  • It's my pleasure

    – Savan Patel
    Apr 25 at 13:01













0












0








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






share|improve this answer













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







share|improve this answer












share|improve this answer



share|improve this answer










answered Apr 25 at 12:24









Savan PatelSavan Patel

10612




10612












  • 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.

    – Magento vsmarttec
    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!

    – Magento vsmarttec
    Apr 25 at 12:50











  • It's my pleasure

    – Savan Patel
    Apr 25 at 13:01

















  • 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.

    – Magento vsmarttec
    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!

    – Magento vsmarttec
    Apr 25 at 12:50











  • It's my pleasure

    – Savan Patel
    Apr 25 at 13:01
















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.

– Magento vsmarttec
Apr 25 at 12:26





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.

– Magento vsmarttec
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






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





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!

– Magento vsmarttec
Apr 25 at 12:50





Thanks for your information!

– Magento vsmarttec
Apr 25 at 12:50













It's my pleasure

– Savan Patel
Apr 25 at 13:01





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;






share|improve this answer

























  • I have tried it but not working

    – Magento vsmarttec
    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.

    – Magento vsmarttec
    Apr 25 at 12:00















-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;






share|improve this answer

























  • I have tried it but not working

    – Magento vsmarttec
    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.

    – Magento vsmarttec
    Apr 25 at 12:00













-1












-1








-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;






share|improve this answer















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;







share|improve this answer














share|improve this answer



share|improve this answer








edited Apr 25 at 7:26

























answered Apr 25 at 7:20









Shailesh KatarmalShailesh Katarmal

1345




1345












  • I have tried it but not working

    – Magento vsmarttec
    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.

    – Magento vsmarttec
    Apr 25 at 12:00

















  • I have tried it but not working

    – Magento vsmarttec
    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.

    – Magento vsmarttec
    Apr 25 at 12:00
















I have tried it but not working

– Magento vsmarttec
Apr 25 at 9:38





I have tried it but not working

– Magento vsmarttec
Apr 25 at 9:38













Please have you checked your CSS code updated in browser?

– Shailesh Katarmal
Apr 25 at 11:29





Please have you checked your CSS code updated in browser?

– Shailesh Katarmal
Apr 25 at 11:29




1




1





Yes, I have checked and see the CSS code updated in browser but I didn't get the desired result.

– Magento vsmarttec
Apr 25 at 12:00





Yes, I have checked and see the CSS code updated in browser but I didn't get the desired result.

– Magento vsmarttec
Apr 25 at 12:00











-1














Your code is right, you just have to add !important in display attribute to make sure it will be the priority CSS attribute to be applied.



span.step-title 
word-wrap: break-word;
display:block !important;
width:156px;



Or apply the wrap in the main div container:



.contact-delivery-title 
word-wrap: break-word;
display:block !important;
width:156px;






share|improve this answer

























  • I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

    – Magento vsmarttec
    Apr 25 at 12:20











  • @Magentovsmarttec you can adjust width like 200 and it will be good

    – magefms
    Apr 25 at 13:29
















-1














Your code is right, you just have to add !important in display attribute to make sure it will be the priority CSS attribute to be applied.



span.step-title 
word-wrap: break-word;
display:block !important;
width:156px;



Or apply the wrap in the main div container:



.contact-delivery-title 
word-wrap: break-word;
display:block !important;
width:156px;






share|improve this answer

























  • I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

    – Magento vsmarttec
    Apr 25 at 12:20











  • @Magentovsmarttec you can adjust width like 200 and it will be good

    – magefms
    Apr 25 at 13:29














-1












-1








-1







Your code is right, you just have to add !important in display attribute to make sure it will be the priority CSS attribute to be applied.



span.step-title 
word-wrap: break-word;
display:block !important;
width:156px;



Or apply the wrap in the main div container:



.contact-delivery-title 
word-wrap: break-word;
display:block !important;
width:156px;






share|improve this answer















Your code is right, you just have to add !important in display attribute to make sure it will be the priority CSS attribute to be applied.



span.step-title 
word-wrap: break-word;
display:block !important;
width:156px;



Or apply the wrap in the main div container:



.contact-delivery-title 
word-wrap: break-word;
display:block !important;
width:156px;







share|improve this answer














share|improve this answer



share|improve this answer








edited Apr 25 at 12:13

























answered Apr 25 at 7:27









magefmsmagefms

2,8692529




2,8692529












  • I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

    – Magento vsmarttec
    Apr 25 at 12:20











  • @Magentovsmarttec you can adjust width like 200 and it will be good

    – magefms
    Apr 25 at 13:29


















  • I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

    – Magento vsmarttec
    Apr 25 at 12:20











  • @Magentovsmarttec you can adjust width like 200 and it will be good

    – magefms
    Apr 25 at 13:29

















I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

– Magento vsmarttec
Apr 25 at 12:20





I have tried them both, I'm getting the output as an attached image (Third Image) in the question.

– Magento vsmarttec
Apr 25 at 12:20













@Magentovsmarttec you can adjust width like 200 and it will be good

– magefms
Apr 25 at 13:29






@Magentovsmarttec you can adjust width like 200 and it will be good

– magefms
Apr 25 at 13:29


















draft saved

draft discarded
















































Thanks for contributing an answer to Magento Stack Exchange!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f272363%2fhow-to-make-a-word-break-for-span-element%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Sum ergo cogito? 1 nng

419 nièngy_Soadمي 19bal1.5o_g

Queiggey Chernihivv 9NnOo i Zw X QqKk LpB