“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

These days I did such a function: use the QLabel control to display text, ellipsis appears when too much text.

In the past we’ve only set the ellipsis to appear on too many lines of text.

Now, what I want to achieve is something like this:

How do you do that?

Next, I’ll introduce some of my ideas, but only the last one will work. Is also for everyone to step on a lot of pits!

Implementation approach

Idea 1:

In the beginning, I just used the QLabel control. After setting the automatic wrapping, I thought I could get the number of text lines after the wrapping, but found that the QLabel control could not get.

And then I thought, can you intercept text that’s just displayed?

The “elidedText” function can only omit one line, but what about multiple lines?

The idea was shelved for the time being.

Idea 2:

Because in the MFC framework CEdit control can obtain the number of lines displayed, so, for the QT framework, edit box control is not to be able to do it?

Assuming you can get the number of lines displayed, you only need to get the first two lines of text.

Think very ideal, the result can not achieve!

QPlainText, QTextBrowser, and QTextEdit cannot get the number of lines displayed.

Is it because the string I pass doesn’t have a newline character like “\n”?

Document ()->lineCount(); Others say the API is a chicken rib.

Anyway, the edit box control just can’t be done, ready to give up!

Idea 3:

I had an Epiphany yesterday, and I came up with a really stupid way to do it, but I think it should work.

As a result, the ellipsis appears when multi-line text is implemented for the QLabel control

Below, I will focus on my stupid method!

Implementation method

Not all say, no matter black cat and white cat can catch the mouse is a good cat, as long as can achieve this function, is a good method. This method is also the only one after I look up a few days of information, so say little love quickly point up, save the next time forget!

Here we go!!

We understand that normally QFontMetrics::elidedText takes only one line of text with an ellipsis at the end

For example, the effect shown below:

How many rows? Everyone please follow my steps, will certainly achieve the beginning of the article picture effect!

QString qsDescribe = "The text here is long!" ;Copy the code

There is a lot of text in “qsDescribe” and we only want to display two lines of text.

Step 1: Get the first line of text

QString qsLine1 = fontMetrics. ElidedText (qsDescribe, Qt::ElideRight, nShowWidth);Copy the code

NShowWidth: The width of the current line, used to carry display text

Step 2: Remove the “…” from the first line of text

After the first step, we get the text with “…” If we want to get the actual data of the first row, we must remove what the system gave us to concatenate

qsLine1 = qsLine1.left(qsLine1.size() - 1);
Copy the code

Step 3: Get the actual text length of the first line

Int nLine1Count = qsline1.length ();Copy the code

Step 4: Get the rest of the text

QString qsRemainingContent = qsdescribe.mid (nLine1Count + 1, qsdescribe.length () -nline1count); QString qsRemainingContent = qsdescribe.mid (nLine1Count + 1, qsdescribe.length () -nline1count);Copy the code

Here, we need to get the text content except for the first line, which will be used to intercept the second line of text for display

Step 5: Get the second line of text

QString qsLine2 = fontMetrics. ElidedText (qsRemainingContent, Qt::ElideRight, nShowWidth);Copy the code

You need to use the same width when retrieving the second line of text.

Step 6: Text splicing

QString qsNewContent = qsLine1 + qsLine2;Copy the code

Here text concatenation refers to: the text intercepted from the first line + the text intercepted from the second line

Because I’m just displaying two lines of text followed by an ellipsis, so here I get “qsNewContent” and that’s what I’m actually displaying!

Step 7: Set the text display and style

/ / set the text shows the UI labContent - > setAlignment (Qt: : AlignVCenter | Qt: : AlignHCenter); ui.labContent->setFixedSize(QSize(nShowWidth+10, 70)); ui.labContent->setText(qsNewContent); ui.labContent->setWordWrap(true); // wrapCopy the code

At this point, you can display two lines of text with an ellipsis at the end.

But, one important thing!!

1: When we use this control, we must first set the control style, that is, set “setStyleSheet”.

2: be sure to set the display area first. That is, the display area must be fixed before the method is implemented

3: the current control of this setting, must not be in the construction of the implementation, otherwise the implementation of the effect has a certain deviation. It is best to set the widget after it has been created.

conclusion

Here, using QLabel static text control to display multiple lines of text after the ellipsis method is introduced, I hope to help you!

I am a good citizen of China, engaged in 5 years of development of code farming ~