Button text split into two lines

Hi,

I have some button with a text, which I would need to split into two lines. Setting max-width: 80%; works, but if possible I would like to find other solution, like using a new line symbol or something like that.

I have tried add <br /> tag into text, but it became a part of that text and didn’t split it.

Also I have tried remove the text and add it by content, like this:

.btn::before {
content: "Wholesale \A B2B zone";
white-space: pre;
display: block;
}

It didn’t do anything. Please see the attached image, there is shown the actual state and what I would like to achieve. Is there any other way how to achieve it than changing max-with css value?

Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. Please provide the URL of the page where you added the button. Because the CSS you provided is working fine on my end.

Best Regards.

Thank you for the help. Depending on your answer I was trying to find what I was doing wrong and now it’s working.

But there still remains the main problem I have thought the code above could solve it. At first I needed to split text into two lines (you have helped me with that) and then apply different CSS style for the first line. There is a CSS selector for it (::first-line), but in WoodMart theme I get different result than is expected. Please see the attached image – the code on the left and right side is the same, but with different results. It seems, WoodMart CSS code can affect it and therefore I get different results.

Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

We are Glad that one of your issues is fixed.

I saw the screenshot you attached. It seems that you haven’t defined the color for the color that’s why the second line is not visible. I have added the color from the front-end and the next line is displaying.

Screenshot for Clarification: https://ibb.co/VqySdwG

Best Regards.

Thanks for the reply. Now the font color is visible. But why does it ignore background color? It is set in CSS, also it works if I don’t use ::first-line selector. If I use it somewhere in the CSS code, the background color disappear.

Best Regards

Hello,

I have inspected the issue in detail and found that you have added the text in the wrong way.

If we trigger only one code then the CSS will affect all. So you need to break the text.

Please replace the code with the following:

.wholesale-btn::after {
content: "B2B zone";
color: red;
background-color: yellow;
padding: 5px;
}
.wholesale-btn::before {
content: "Wholesale \A " !important;
background-color: red;
padding: 5px;
}

And then you can set the values according to your needs.

Best Regards.

[Author]

Posts