Elementor搭建着陆页：如何避免指定旋转段落文本换行问题求助

Hey there! Let's work through that line-break issue you're facing with your rotated "Sales and marketing director" text in the "the speakers" section. Here are a few practical solutions tailored to your setup:

1. Force No Wrapping with white-space: nowrap #

First, you can target the specific text segment that shouldn't break by wrapping "marketing director" in a <span> directly within your Elementor paragraph element (just edit the text and add the span with a class, like <span class="no-wrap">marketing director</span>). Then add this CSS:

.rotate_cargo_1 .no-wrap {
  white-space: nowrap;
}

If you want the entire paragraph to avoid unnecessary breaks, you can apply the property directly to your existing class, but you'll need to adjust the element's box model to fit the rotated content:

.rotate_cargo_1 {
  transform: rotate(-270deg);
  white-space: nowrap;
  width: fit-content;
  height: fit-content;
}

This tells the browser to keep the text on a single line unless explicitly forced to break.

2. Adjust Container Dimensions & Parent Column Settings #

When you rotate an element, its original layout box doesn't update to match the rotated size, which can cause unexpected wrapping. Try setting a min-width on your rotated paragraph to accommodate the full text length after rotation:

.rotate_cargo_1 {
  transform: rotate(-270deg);
  white-space: nowrap;
  min-width: 160px; /* Tweak this value to fit your exact text length */
}

Also, double-check the parent column in your 3-column Elementor layout: make sure it has enough padding/margin and width allocated to fit the rotated element without squeezing it into a wrap.

3. Use writing-mode for More Natural Vertical Text #

Instead of relying on transform: rotate, consider using CSS writing-mode to create vertical text. This method handles text flow more naturally and reduces the chance of unwanted breaks. Replace your current CSS with:

.rotate_cargo_1 {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* Matches the -270deg rotation effect you had before */
  white-space: nowrap;
}

This keeps the text in its native flow while displaying vertically, which often plays nicer with layout constraints in Elementor.

Don't forget to test these changes across different screen sizes—you might need to add a media query to adjust the text size or container dimensions for mobile devices if needed!

内容的提问来源于stack exchange，提问作者Sérgio Crestana