I would like to know how can I wrap the text inside a container and not get cut off if the page size is smaller than the size needed for the paragraph to be displayed. - A scrollbar cannot be used..
Any helping ideas? :s
you need try this:
word-wrap:break-word;
Wrapping is automatically added to the word fit in the specified width of the block.
Related
I have a <div> that contains text. The text have some very long lines, like "To use this page, you have to first register for an account..." etc.
At the right-side of this div, I have an image. When the user is on small screens, I want to wrap contents. When he is not, the image should stay the same size, and the text on the div should wrap lines (but keep the two elements side-by-side).
So far, I was able to make the text wrap only if I add a combination of flex: 0 1 400px, for example. But this combination makes things weird when resizing the screen, because the text stays wrapped even when there's space on the screen (because the div does not grow).
So, what I'm probably looking is that if there's a way to say "only wrap contents if the parent size is lower than ". Is it possible?
You can try setting the flex property to a media query, only for screens that exceeds the parent size so it would something like :
#media only screen and (min-width: *size* px){
parent{
flex: 0 1 400px;
}
}
By using this the text shouldn't be able to wrap anymore in screen lower than the size variable
Ok, I was able to make it work with #media. In the end, I did add a #mediawithmin-width: and set theflex-direction: row`, so that it'll simulate the wrap.
I tried to play with flex-wrap but the parent element won't resize when I'm wrapping, so I could not center the other elements, so that's the solution I ended up with.
I want the height of the images between brackets to match depending on the height of the text in the center. How can I do that with css?
The orange color is the top/bottom margin of the text.
with a small text it should look like this:
with a big text it should look like this:
The images must adapt to all sizes and especially that they can be large to have a good resolution.
If possible without Javascript...
Here is what I tried: DEMO
In this DEMO, either the height of the image doesn't change, as in the first example. Either the width of the text doesn't fit correctly, as in the second example.
Thanks in advance
Don't know how to explain this. Let's see the picture
See! Some text is showing divided. I used overflow hidden property. I've cut off the whole string into 200 letters. And then positioned it inside a div. This is dynamic. Problem occurs when someone put extra or newlines in the paragraph. Then this happens. Can anyone please tell me how to stop this? These half sentences should not occur in that div as visible. Is there any system or property to stop this?
use white-space: nowrap; for your div to show the text in one line.this way, it'll hide the extra text that comes in your div of fixed width as you have hidden the overflow
check this for ref :
http://css-tricks.com/almanac/properties/w/whitespace/
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
http://www.w3schools.com/cssref/pr_text_white-space.asp
First of all you need to remove any fixed height for the divs, probably replacing it for a min-height.
Second, you should set the property overflow:none, to avoid rendering to cut the contents of the div, and instead of that expand it to the required size.
you can even try overflow: scroll. By this no matter how much content you have, u can always scroll.
jsFiddle
In this jsFiddle I've got two images and then some text. I want it to appear like this:
note: the images and text should be sitting on the same horizontal axis, the text is not supposed to be higher
So what I'm trying to do is make the text appear over multi-lines within a box with a width of 150. How can I do this?
Is this what you're trying to do?
As you can see I've only changed your CSS a bit by adding a display:inline-block to your text container.
I am making a site in HTML, and I am putting a heading on top of an object. When I shrink the window enough, the object and the text interfere
Is there any way I can have the text just stay in one spot without it wrapping to the browser window if there is no space left in the browser?
I have tried using fixed as a position property in CSS, but the same thing happened.
If you set an explicit width on the containing object (perhaps a <div> tag) it will not resize with the window. When the window becomes too small, it will not wrap around like you mentioned but force a scroll bar to appear.
I'm not sure what you mean by ending lines. If you're talking about wrapping, have you considered a fixed size DIV with overflow:hidden as a CSS rule?