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?
Related
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
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
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
I built a quick jQuery image slider today, but there's one problem. The images, which are inside divs, have a gap between them, offsetting them.
I've isolated the problem here: http://jsfiddle.net/UgzsH/
float: left; gets rid of that gap, but apparently because of the elements they are in, they stack vertically.
Unfortunately from this computer I can only test in Firefox. Thanks for any help.
Test case uses http://placekitten.com/.
Floating is how you get rid of the gap, but the last floated element is dropping down because the container is too small. The reason you get the gap is because elements that are display: inline with each other preserve the whitespace you get from the markup itself - if you remove the whitespace (meaning line-breaks) you'll notice the gaps go away. This makes your markup uglier, or course, hence why you use float instead. Make your containing div wider and they'll fit.
It's because in your HTML you have spaces between the divs and such. Try putting all the images and divs in one line of your HTML without spaces between the tags. No spaces!
Hope this helps and good luck!
EDIT: Here's the updated code. It looks a bit messy, but there are no spaces any more!
I have had the following problem for a while and I am really not sure how to solve it.
The problem can currently be observed here: http://www.androidpolice.com/2009/11/16/the-not-so-good-the-bad-and-the-ugly-my-list-of-20-problems-with-htc-hero/ - feel free to use this for Firebugging.
There are 2 notions here: a table of contents (toc) and notes. A note usually takes 100% of the post width and everything is fine.
However, when a note appears next to a toc, the toc starts overlapping and covering the note (I set z-index:1 on the toc because otherwise the note covered it, which was even worse).
It's interesting to point out that the text of the note doesn't get covered by the toc - only the note div itself does.
In IE7, it's even worse - the note div jumps down to under the toc and leaves a lot of empty space (2nd screenshot).
So, how can I solve this? The ideal solution would have the note div occupy 100% of the visible space - i.e. it would resize itself to fit right next to the toc when needed.
Here are some screenshots for future reference:
In IE7:
I've had about the same problem. Though I can't help for your IE7-specific issue, using overflow: hidden on the left column did the trick for the layout overlapping (and did not hide data). Specifically, in your case, you need to:
Remove the position:relative code on the relevant .toc and .note elements;
Set width:auto on the .note elements;
Set overflow:hidden on the .note elements.
Note that this will not work under IE6, but meh, it's IE6. It'll look ugly, but people using IE6 these days are forced to, and besides, it's not making the website unusable.
The result in Safari: