All,
I have a text field that when it gets too full the line goes to the next line instead of extending horizontally.
On the right side of the following webpage you can type in an email address and make it long and the text wraps instead of going horizontally. Does anyone have any idea why it would be doing this? Is it something in my CSS? I inspected the element but didn't see anything that would be causing it.
Here is the URL:
http://tinyurl.com/bolsrcx
Thanks
Add word-break: initial; on the <input>
Its a new CSS 3 keyword, and luckily has -WebKit support :)
Related
how i can solve that problem?:
My problem
if I put a spaced text there is no problem, but otherwise...
Im using materializecss if it can help :)
Try this in your CSS tag for the element in question: word-wrap: break-word;
Answer from: Brad Colacino
As Brad mentioned, the reason why your text flies off the div is because the long single line counts as a single word. By default, lines are divided by spaces and other non-word delimiters.
To fix this case where a long word runs off the screen, use this:
div {
word-wrap: break-word;
}
This will tell the browser to divide the word at the point where it runs off the div (assuming it is a div) and start a new line continuing where the word was cut off like :
abcdef
ghijk...
EDIT: If you are using CSS3, there is also word-break
On my webpage I've used fancybox for preview section of description text in popup. Text shows perfectly fine on desktop but on popup it shows something like this.
Please note that the descriptive text I'm getting for the display it include for each space user gives for the sentence after each word.
and when I use word-break: break-all; it gets like this
then I've used word-break:break-word; also and get this
you can spot the difference now, that it breaks word viz clearly not acceptable. I want to break sentences meaningfully not the word!
Problem is I can only use HTML/CSS only here for fixing this, have looked many que/ans here but no luck.
Please help me into this.
I've created a JSFiddle please look into this may be this will help to understand clearly.
Note: If you don't want to modified server side scripts, you can use this JavaScript solution instead. I don't think you can do so with CSS only without doing any amendments in your server side code to remove these &nbps;.
In that case, you should first decode HTML special chars to simple text using following JavaScript code.
var text = $("<textarea/>").html('your HTML encoded text here with and all').text();
$('your viewing div/p selector').html(text);
And add this CSS property in your viewing div or p.
white-space: pre-wrap;
It should work.
Use word-wrap:break-word;
It even works in IE.
There are many possible values of the css "word-break" property.
http://www.w3schools.com/cssref/css3_pr_word-break.asp
word-break:break-word;
https://jsfiddle.net/1acbtr82
word-break:keep-all;
https://jsfiddle.net/dabros/1acbtr82/1/
The first works fine but does break up "googling" into "googlin-g", the second refuses to even do that.
I'm having an issue getting the text in one of my input boxes to begin at the top of the input box. Instead, it is vertically centered. None of the other solutions on stackoverflow seemed to help.
I've recreated the issue here (ignore how bad the rest of the form looks ;): http://codepen.io/tim1017/pen/ofuhx
And here's the actual page it's located on: http://dev.longviewsources.com/contact/
Thanks!
For multi-line text, which it looks like you're going for, you probably want to use a <textarea>, not a text input tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Also see: Multiple lines of input in <input type="text" />
You're using an input where you should use a textarea. Input elements only support one line of input, thus it is centering that one line vertically. Here's a working fork: http://codepen.io/anon/pen/LBvsd
corrected and forked you can check the css and example;
here
Please view the following fiddle in Firefox and you will see that the line of text in the textarea is getting cut off mid way through because of the long file name, but in IE and Chrome, the line goes the entire width of the textarea and only wraps once it has reached the end. I would like to achive this same behavior in Firefox and have tried everything I can with my limited CSS skills to make it work to no avail so thought I would stop pulling my hair out and come to the pros for some help.
Fiddle: http://jsfiddle.net/yGuAy/1/
No values of word-wrap: and text-wrap: seem to work for me. However, you can omit your problem by using dashes instead of underscores in links.
If you play around with the textarea width property and font-size you can reach a desirable outcome.
JsFiddle Example
By adding style of dimension in textarea it works-
<textarea cols="70" rows="3" style="width: 675px; height: 30px;">http://www.example.com/some_dir/another_dir/some_really_long_and_complex_file_name.ext</textarea>
But this is temporary solution but can not figure out why is it so with firefox.I think problem is with " / " in url .If i removes it works but same i don't know reason.
I think the firefox is considering the last part of the string
/some_really_long_and_complex_file_name.ext
to be one single word (which is true), which may be longer than the horizontal space available in the text area, so it simply puts the the last part in the next line. So if you try increase the width of the text area it will fit horizontally.
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/