Displaying Anchor Labels as Single-Line Text | XM Community
Skip to main content
Solved

Displaying Anchor Labels as Single-Line Text

  • April 30, 2025
  • 7 replies
  • 73 views

Forum|alt.badge.img+1
  • Level 1 ●
  • 8 replies

I need assistance in displaying the anchor labels from the screenshot above on a single line—for example, 'Very Good'—instead of splitting them across two lines, such as 'Very' on one line and 'Good' on the next.

Best answer by vgayraud

Try 

.mc.horizontal .choices .choice.above .choice-label {
text-wrap-mode: nowrap;
}

 

7 replies

pamelalbeck
Level 5 ●●●●●
Forum|alt.badge.img+32
  • Level 5 ●●●●●
  • 112 replies
  • April 30, 2025

Hello,

Are you able to change the font size in the Rich Content (Choice Text) Editor?  Two other ideas, remove the space around the “=” or write out the scale 1-7 and in the question state that 1 = Very Bad and 7 = Very Good.  Hope that helps!


vgayraud
QPN Level 6 ●●●●●●
Forum|alt.badge.img+58
  • QPN Level 6 ●●●●●●
  • 549 replies
  • April 30, 2025

Hi,

You can use non-breaking spaces in your labels, although you might end up with very uneven cells if you have a lot of choices and long labels.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • April 30, 2025

Thanks, @vgayraud. Non-breaking spaces seem to be work for me.


Sachin Nandikol
QPN Level 6 ●●●●●●
Forum|alt.badge.img+44
  • QPN Level 6 ●●●●●●
  • 531 replies
  • April 30, 2025

Hello ​@Rija,

If you dont want non-breaking spaces then you can simply use below code:

.mc.horizontal .choices .choice.above .choice-label {
box-sizing: initial;

 

Add it in ‘Look & Feel’ - ‘Style’ - ‘Custom CSS’.

Let me know if this helps.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • April 30, 2025

Hi @Sachin,

Thank you for your response. I tried adding the CSS:

.mc.horizontal .choices .choice.above .choice-label {
box-sizing: initial;

to the 'Custom CSS' section, but unfortunately, it doesn't seem to be working.

The non-breaking spaces suggestion from @vgayraud (e.g., "Very Good") does work; however, manually editing each choice label in a long survey is a bit time-consuming.


vgayraud
QPN Level 6 ●●●●●●
Forum|alt.badge.img+58
  • QPN Level 6 ●●●●●●
  • 549 replies
  • Answer
  • April 30, 2025

Try 

.mc.horizontal .choices .choice.above .choice-label {
text-wrap-mode: nowrap;
}

 


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • April 30, 2025

Thanks ​@vgayraud. This code “ .mc.horizontal .choices .choice.above .choice-label { text-wrap-mode: nowrap; } “ works great.