It is possible to set the CSS white-space of a QtQuick Label to pre-wrap?

Question

I have a QtQuick Label in a QML file like so:

import QtQuick.Controls 1.3 as Controls
Controls.Label {
    id: lbl
    text: "This is        some <b>bold text</b> with extra      white space"
}

If the text property of my label contains any HTML, then the label renders it as HTML and the multiple spaces in the original text are compressed down to a single space (if the text contains no HTML then it is rendered as normal text and the spaces are preserved).

QWidget has a setStyleSheet method that apparently supports the style "white-space: pre-wrap" which is what I need to get the HTML rendering to preserve the whitespace, but I'm not sure if I can apply this to a Label in a QML file. Is there any way to achieve this?

Edit: This answer: https://stackoverflow.com/a/2756376/14606 shows setting the styleSheet property for a QLabel. Is there any way to write a function that will let me pass my QtQuick Label and cast it as a QLabel and set the stylesheet in this way?

A Label is not a QWidget, nor does it inherit, nor can you cast QLabel so forget it. — eyllanesc, Aug 22 '18 at 14:46

KYL3R · Answer 1 · 2018-08-22T12:41:46.450

0

All you need to know is how to apply css in qml, instead of code (widget.setStyleSheet("...")) ?

Have you tried this?

Controls.Label {
    id: lbl;
    white-space: pre-wrap;
    text: "This is        some <b>bold text</b> with extra      white space";
}

edit: Since white-space is not a property of Label, you need to set this property for the label text.

If possible (just guessing) use:

Controls.Label.Text {
    white-space: pre-wrap;

But if not, use this workaround:

Controls.Label {
    id: lbl;
    textFormat: Text.RichText;
    text: "<style>white-space: pre-wrap;</style>This is        some <b>bold text</b> with extra      white space";
}

edited Aug 22 '18 at 12:41

answered Aug 22 '18 at 12:33

KYL3R

3,877
1
12
26

Doesn't work, white-space is not a property of a Label. – MusiGenesis Aug 22 '18 at 12:35
Label only supports this HTML subset: http://doc.qt.io/qt-5/richtext-html-subset.html which doesn't include the style tag - so "white-space; pre-wrap;" shows up in the displayed text. – MusiGenesis Aug 22 '18 at 12:48
are you 100% sure you have `textFormat: Text.RichText;` set? I think ` – KYL3R Aug 22 '18 at 13:26
It's actually set to `Text.AutoText` so it shows Text.RichText as necessary (like if there's HTML tags there). It does not render the tags themselves, but it ignores the tags and does render the text in between them ("white-space: pre-wrap;") as if it were any other ordinary text. – MusiGenesis Aug 22 '18 at 14:40

score 0 · Accepted Answer · answered Sep 01 '18 at 03:04

You can actually achieve what I was looking for (a Label that can display HTML while preserving white space) by doing a text replace on your original string and replacing all regular spaces (" ") with   (which is a zero-length string followed by a regular string). The Label will then faithfully render consecutive spaces, as if the white-space style had been set to pre-wrap. Unfortunately this only kind of works (for my purposes at least) since the Label does not handle line wrapping the same way in both cases.

It is possible to set the CSS white-space of a QtQuick Label to pre-wrap?

2 Answers2