Hello!
Please help me understand why a simple text with fragments of poems, where I need to make a forced transition to the next line using Enter, in the browser shows these texts in such a strange way?
This is a link block, so here I am forced to use a simple Text block, and not Rich text.
And of course, in the SMS form and in the Design mode everything is previewed correctly.
Here is read-only link
Thanks in advance.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Vladimirs,
Your plain text content has leading spaces on rows 2+.
You can just edit that out if you do not want those leading spaces.
Using white-space: break-spaces will preserve those in-text spaces and line-breaks like pre-wrap does.
Hi Michael,
Thank you for your answer!
But unfortunately I still don’t understand what I should do to prevent extra spaces or tabs from being added in front of the lines.
Even if I paste the text cleared of enters and add enters at the end of each line directly in the CMS editing window, then after publishing in the browser these huge spaces still appear at the beginning of each line. Why does Weblow perceive a simple enter as a set of spaces in this case?
I don’t think Webflow is adding anything.
Browsers have always handled preformatted text weirdly because of whitespace ambiguities in the source code.
A few paths;
Don’t use plaintext, preformatting and line breaks, use actual rich text and paragraphs instead for your text, it gives you far greater formatting control.
Keep your approach, and look into CSS whitespace handling and see if you can identify a way to change the parsing and rendering.
Use script to make modifications to the content.
@memetican
Thank you for your answer!
I would love to use Rich text, but I can’t place it into the Link block, Webflow doesn’t allow it. And I wanted this whole block to be a link.
Using Paragraph also doesn’t give anything, Paragraph block doesn’t “see” the line breaks (Enters) at all:
To be honest, I don’t know how I can use CSS or script if I only have a simple text input form in the CMS collection?
And why? I’m not a programmer. If I were a programmer, I would write the code myself and make websites without Webflow. And isn’t Webflow’s main motto that you can make websites without code? After all, this is what I pay money for - a more or less simple opportunity to construct websites without code and hosting.
Why can’t Webflow do something incredibly simple, just display a line break in texts correctly using Enter, like all other programs do?
Webflow generates HTML and CSS, and the browser renders it.
Webflow doesn’t control the browsers or the HTML/CSS specifications - at the end of the day you have to understand what you’re creating and how browsers will present it to users.
That’s why I’d avoid preformatting styles here, it’s not a good fit for what you’re trying to do, and can be affected by features like HTML minifiers.
Rich text block is what you want for formatting control.
For line breaks in that content you use SHIFT+ENTER when you’re typing, or load in with <br>s in your content.
The rest is styling it in the designer.
For your links, you have a few options as well. Try surrounding the rich text element with a custom element, type a and see if you can bind the href property to the link you want.
Alternatively you can just use a relative-absolute layout and layer the link over top of your rich text element.
But again, I’d look into CSS whitespace controls. Pre-line might be closer to what you want in the published HTML.
@memetican
Thank you Michael!
Your idea about relative-absolute layout worked quite well.
With this layout I can use Rich text for link blocks.
I’m ashamed now that I couldn’t solve the problem myself before.
