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;
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:
2. I would like to change it as below:
3. But getting the below result:
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
|
show 1 more comment
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:
2. I would like to change it as below:
3. But getting the below result:
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
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 likespan.step-title
– magefms
Apr 25 at 12:06
|
show 1 more comment
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:
2. I would like to change it as below:
3. But getting the below result:
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
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:
2. I would like to change it as below:
3. But getting the below result:
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
css checkout-page
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 likespan.step-title
– magefms
Apr 25 at 12:06
|
show 1 more comment
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 likespan.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
|
show 1 more comment
3 Answers
3
active
oldest
votes
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.
– 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
add a comment |
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
– 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
add a comment |
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;
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
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
– 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
add a comment |
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.
– 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
add a comment |
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
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
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
add a comment |
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
add a comment |
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
– 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
add a comment |
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
– 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
add a comment |
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;
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;
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
add a comment |
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
add a comment |
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;
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
add a comment |
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;
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
add a comment |
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;
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;
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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