The top section title of DataSN enables everyone to easily make use of data of all websites on the Internet, flexibly and affordably. on this page is behaving weird in that the last line of text is overflowing out of the screen on mobile devices such as "iPhone 6/7/8" with Chrome developer tools.
Tried overflow: auto which only makes it scrollable horizontally and word-break: break-word; which breaks the last word affordably by half.
Neither of the solutions is ideal. It's weird that it behaves in this manner. Shouldn't it be auto wrapped just like how it is for the previous lines? How to make it wrap by word for the last line here?
You are using between words.. nbsp stands for no-break space. And hence these words don't wrap around the space.
After changing to simple space
Related
There are two divs. The left one has specified it's css like this:
max-width:30%;
min-width:450px;
The right one has a
flex-grow:1
There is a lot of other styling but Im hopefully just pointing out the most relevant.
Inside the right div there are a few elements.
The innerst element is a p-tag where I have tried to put all possible directives to make it break long words.
The last attempt is this:
word-break: break-all;
word-wrap: break-word;
I also tried to combine with other directives, like
max-width:100%
width:100%
display: block (but even all other possible values)
Many people seem to have solved this using microsoft specific word-break/wrap. In my case it doesn't succeed.
When having a word composed by for example 50 characters (without white space) a big part of the word is not visible as it goes outside the browser.
The page itself doesn't have an horizontal scroll (there is maybe other styling that stops this).
Even adding
overflow:hidden/scroll
inside the p-tag didn't help. I see the horizontal scroll but it doesn't really let you scroll to the right, even if the scrollbar is there.
This is crazy situation. Debugging with explorer devtools is not the best experience.
Anyone that can help?
If I have a container with some text in it, is there a way to break the line in half, rather than based on some fixed width?
For example, I would normally assign a width (say, 200px) to a container before placing some text in it. Often this can lead to an awkward line break where only the last word in a header must wrap.
This is a header that is
long
versus
This is a header
that is long
Ideally it would only break if the text didn't fit on one line, and if it broke, it would do so in an even way. Would be happy with just always breaking in half as well, though, since that seems pretty complex for CSS to do alone.
Unfortunately, this is not possible in pure CSS. This this jQuery plugin automatically breaks your line of text nicely in 2 when the container is smaller than the text width:
https://github.com/SumoSoft/PrettyBreak
I have a large HTML document with the background being converted to PDF (using wkhtmltopdf).
Sometimes page break happens in middle of the text block, and last line before page break is too close to the bottom of page. (text blocks have already with page-break: avoid, and spacing between blocks is large enough to keep the block away from the bottom of page)
Is there a possibility to add margin / padding to last line before page break?
Seems like page-break-inside: avoid might be the source of the problem. According to MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside, it probably causes the text blocks ignore page's margins.
Maybe you could manually place page-break-after: always somewhere in your HTML code so as to achieve the needed formatting. Another thing to try is maybe display: inline-block with the container having white-space: nowrap and the text block having white-space: normal. (Just a hypothesis, though, seems like some experimentation is needed.)
i'm making a new site where the headings have backgrounds around them and a little padding.
This is a responsive site, so in some states the headings will break into multiple lines, resulting in them losing the padding to the right on the first line, and to the left on the second line. I am using display:inline since the padding needs to be adjusted around each line.
Is there any way to keep the padding when breaking lines?
Example:
http://jsfiddle.net/gmW5X/
The padding is missing after introducing and before the ...
This does not need to scale down to old ie since the problem only appears at the mobile css targeted to primarely iphone. However, i'd very much like not to alter too much html :/
I don't see another solution but wrap each word in span... http://jsfiddle.net/gmW5X/4
display: inline-block;
do the trick.
jsFiddle
Long inputs in my site overflow out of the div and the allowed width.
I read that it's because the browser will only insert line breaks if there are spaces.
Since my site is all about user-input, that could mess up with things.
I wanted to know if there's a way to still limit the width even if the input has no spaces in it.
I recomend you to use overflow:auto instead, to your div. It may give you better result.
Make your div scrollable so all overflowing content doesn't break the layout but scrolls instead.
<div style="overflow:scroll;">...</div>
Yea, word wrap breaks lines on word boundaries. If you don't have word boundaries, then that's going to be an issue.
So don't rely on word-wrap, but make your containers scrollable with overflow: scroll and friends in CSS.