How to make a breakline in a textbox - html

Basically I want to something like below:
It is a textbox that has some predefined text. What is the best way to make it to appear like two rows and allow the texts within to have a breakline? As I've mentioned this is predefined text, I tried with text="abcdef<br/>sss" but it is showing <br/> instead of breaking a new line

use a <textarea></textarea> and
for linebreaks

What about using
text="abcdef\nsss"

Use textarea
Look at the sample in w3schools:-
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea

Related

space symbol in html implementation

I want to indent text with several spaces. So I need to put some spaces before the text in order to indent the text. Obviously doesn't work. Is there another symbol that would do that for me. I don't use CSS. Just in a plain html.
Thank you in advance.
This may not be the right way by some peoples standards, but following the OP:
Just in a plain html
&nbps; represents a single space, multiple of them will represent multiple spaces. Html Entities
<pre></pre> also works by telling HTML to allow formatting, preformatted text
Here is a jsfiddle
Use multiple times this combination in your html code:
<p>This will be spaced</p>

Fit text in container without breaking word using HTML/CSS only

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.

Input text stuck in center of input

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

Is it possible to make a textbox look and act like a textarea through CSS alone?

Is it possible to get a textbox ("input" with "type=text") to act like a textarea through CSS alone?
I can set the height and width, obviously, but I can't get it to wrap like a text area nor vertically align the contents like one.
I have a situation where I can't change the HTML of the page, but I can alter the CSS. My users want textareas where they just have textboxes, and I'm hoping I can pull it off with CSS alone.
I've tried about every combination of "white-space" and "vertical-align."
No. You would need some JavaScript as well to change the browser functions. For instance when you hit the enter key in a textbox it submits the form, where as in a text area it will add a new line.
Things like that can't be controlled by CSS to my knowledge.

Text On Image, how do i do this?

I have this:
alt text http://azzyh.dk/newgen/area/member/b/videoklip.jpg
But i want to have place text in the middle like this:
This is how i wanted. http://img251.imageshack.us/img251/4498/exvideo.jpg
How do i do it?
Im sorry forgot to mention i want this in the web.. so like html, so i would use a div or a span to do it
Are you doing it on the web? if so, then you can use css/divs/spans to do it
google css layout tutorials and you'll be fine
Programmatically, this largely depends on what dechnologies you're using. Are you reading in a bitmap, adding text, and outputting a bitmap?
What's the input, what's the output, and how do you want the program to operate? There are hundreds of answers to this question, and all depend on the specification.
If you're familiar with PHP, you could try GD:
http://php.net/manual/en/book.image.php