I have a component with tooltip icon when there is an error.
The problem starts when the text for the tooltip includes a one large word (without spaces).
In such case the text inside the tooltip box exceed the borders.
Please see this sandbox:
https://codesandbox.io/s/fragrant-morning-267l5
By default, word breaks on a new line if it is long enough that there is no space left for it to be on the same line. Since you are typing one long word it can't find a new word to break on so it goes over the box.
What you can do is instead breaking on a word you can break on a letter
word-wrap: break-word;
Add that CSS to text. When it runs out of space for new letter it will go to next line.
Read more about it here
Hope this helps :)
Related
I have a Label that displays the full name and path of the file that the app is currently processing.
The way Labels perform text truncation, the "C:\..." part of the path is always shown, while the actual file name is only shown if it fits. I would rather truncate on the left side, so that the file name is always shown, while the "C:\..." part is only shown if it fits.
Is this possible in Xamarin Forms?
If you read the docs these are the options for truncation
HeadTruncation – truncates the head of the text, showing the end.
CharacterWrap – wraps text onto a new line at a character boundary.
MiddleTruncation – displays the beginning and end of the text, with the middle replace by an ellipsis.
NoWrap – does not wrap text, displaying only as much text as can fit on one line.
TailTruncation – shows the beginning of the text, truncating the end.
WordWrap – wraps text at the word boundary.
HeadTruncation appears to be what you're looking for
On a new project I get some unexpected behavior: When the sidebar is quite small (about 200px) , line breaks occur earlier than needed.
On this image you can see the result (Safari 6.0.2, similar results in other brothers), the left arrow where the word is, the right arrow where the word should be (in my opinion).
example http://fitzskoglund.jensravens.de/screen.jpg
You can find the whole website http://fitzskoglund.jensravens.de to the see effect and CSS.
I cannot attach a special snippet because I don't know where this style or behavior comes from.
Thanks in advance for any advice.
It seems to be for lack of a "space" to break at. When I added a space at the end of this...
<strong>SCHULD SIND IMMER DIE ANDEREN </strong>
...or before this word (which follows the <a> wrapping the <strong>)...
ausgezeichnet
...it seems to work.
What it looks like is happening is the first space in a line is being treated as a ;nbsp, which is being printed as if there is no whitespace. That causes the two end words to be treated as one. If you were to place a single letter like 'a' before the space by the second word, it works, or place a second space in either line.
It looks like it has to do with the way you have your anchor and strong tags styled. They are interacting with the surrounding text in a weird way, causing it to break apart. When I inspect and remove the text after your anchor ("ausgezeichnet"), the anchor text snaps back into place: http://screencast.com/t/G1imlavU . I would remove what you can and keep the mark-up as simple as possible.
With CSS can I make a browser ignore the character but respect normal white space?
So this:
Some text More text
Is displayed like this:
Some text More text
Not:
Some text More text
UPDATE There is actually more white space in my code. I need the default behavior where extra white space doesn't get rendered on the page so I dont think I can use white-space: pre or pre-wrap
So this shouldn't be excessively indent before the initial word.
Some text More text
I don't think there's a pure CSS way of doing that, since is an actual character that is different from the whitespace created by the spacebar in a text editor (what gets ignored by HTML renderers). However, depending on how those are appearing, you may be able to use a script that searches for and removes that character wherever it sees it.
How would I display text in something like QTextEdit starting from bottom up? QTextEdit starts writing at the top filling down to bottom. I want to start from the bottom and then pushing the previous text up as more text is added. I figure I could hack it and simply fill the field with nextlines to reach the bottom then reprinting whatever was written before again when text is to be added, but I wouldn't want to do that unless there isn't any other way.
insertPlainText inserts text at the current text position. You could move the cursor to the start of the docuement using the moveCursor function.
Every time you want to add some text do the following:
textEdit->moveCursor(QTextCursor::Start);
textEdit->insertPlainText(textToBeAdded);
I have a small space in which I would like to put writing. Problem is, if a long word is inputted, it flows off the side because there is no space.
I could do overflow:hidden, but this isn't what I am looking for. Ideally I would like the word to drop to a new line with a - before it.
The word is on a line of its own to begin with so a <br/> will not fix the problem.
word-wrap:break-word in CSS does this (ok, without the - in the newline), but it had some browser issues back when I tried it, so be careful ;).
Second solution is wrapping letters in text (or packets of 3 or 5 letters etc.)in <span></span> so that they'll wrap but have no spaces when fitting the line.
to add the hyphen You could then use jquery and search for elements having certain left offset to prepend hyphens.