<div class="row">
<div class="col-md-10">text</div>
<div class="col-md-10"><a href="#" class="button button-red nomargin">MY BUTTON LONG TEXT LONG TEXT LONG TEXT LONG TEXT</a></div>
</div>I wanna "MY BUTTON LONG TEXT" if not fit on one line then create second line and continue the text.
MY BUTTON LONG TEXT LONG
TEXT LONG TEXT LONG TEXT
Hello,
This is Definitely Possible. You can simply add the style="height: auto; white-space: normal;" Attribute to the Button Code. Example:
<a href="#" class="button button-red nomargin" style="height: auto; white-space: normal;">MY BUTTON LONG TEXT LONG TEXT LONG TEXT LONG TEXT</a>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello!
I used the code above on my one-pager as shown below:
<a href="#" class="button button-border button-light button-rounded" data-scrollto="#section-works" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" style="height: auto; white-space: normal;"> This is really really long text with no meaningful data only to test if this work but has no special meaning at all...only a test to see if this really really works!</a>This indeed makes the long text to extend to a second line within the button. However, it creates a gap between the lines (as shown in the attachment).
I tried using <br> like in:
<a href="#" class="button button-border button-light button-rounded" data-scrollto="#section-works" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" style="height: auto; white-space: normal;"> This is really really long text with no meaningful data only to test if this work but has no special meaning at all
...only a test to see if this really really works!</a>Also tried changing the for
like in:
<pre href="#" class="button button-border button-light button-rounded" data-scrollto="#section-works" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" style="height: auto; white-space: normal;"> This is really really long text with no meaningful data only to test if this work but has no special meaning at all...only a test to see if this really really works!</pre>But still get the same gap between the lines. I would like to include to lines of text within the button - and even different styles for each line. Something like the second attachment - in which I may get the lines closer.
PS: I also tried changing the line-height attribute on the css without luck.
How can I do this?
Nevermind...I used the line-height attribute on the button directly (instead of the style.css) and got it to work. Following the code in case it may be of any help:
<a href="#" class="button button-border button-light button-rounded" data-scrollto="#section-works" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" style="line-height: 130%; white-space: normal; padding: 5px 5px 20px 5px;"> This is really really long text with no meaningful data only to test if this work but has no special meaning at all
...only a test to see if this really really works!</a>Hello,
Yes! Setting the line-height Property will fix this for you. Really Glad that your issues were resolved. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard