Textarea overflowing text when typing in repeated characters - javascript

I have this weird issue that I can't seem to solve.
I made this comment section where you type into the text area, hit DONE and your comment shows up in the comment section (pretty straight forward).
The issue here though is that if you type a "normal" text into the area it produces it properly with line breaks when the text hits the border of the container, but if you type one character continuously it produces it all in one line ... (see picture below).
Has anyone had this issue before and any ideas on how to fix that, just to prevent idiots from bugging my application.
Thanks in advance, have a lovely week!

Actually I've just figured it out ... in CSS: word-break: break-word
... that's literally all I had to do. Sorry to bother you and I hope this helps others if anything!

the issue is because there is no whitespace to break the word, as suggested use word-break: break-all
you can also style it by using overflow: hidden
and also hyphens hyphens: auto;
https://css-tricks.com/almanac/properties/w/word-break/

I hope this is what you looking for,
div {
word-wrap: break-word;
}

Related

Word overflowing in div

I am working on a khmer site, I dont know the language, the words are too long. I am trying to fit them in div but they are over flowing. Is there a way that the part of word comes down automatically such that it fits in the div, and over flow part is in next line.
I dont know what to do with it, please help.
Find the image in the attachment
You should use the word-wrap property of CSS to force the text to stay inside div without overflowing.
word-wrap: break-word
See the DEMO here
Check without this property and with it to see the difference.
See if this works - word-wrap: break-word;
Use the word-wrap CSS property:
.mydiv {
word-wrap: break-word;
}
You can give the below CSS style to the div to prevent the div text from overflowing.
div {
word-wrap: break-word;
}
There is an CSS Attribute for "text overflow" inside HTML Objects
You can do somesthing like that to prevent an overflow by default.
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
reference at W3School
Please note that text-overflow property only occurs when the containers overflow property has the value hidden, scroll or auto.
If you want to warp the long words in multiple lines instead of just "cutting" them you may use "word-wrap: break-word;" which causes the Browser to split long words. (reference)
Please note that both specs are widely supported but very old browsers may ignore them. You can see details in the references.

Justification of text in HTML

Is there way to force the justification of text using CSS to one line? For example:
I want to justify this text
like this
ButIdon'tmindifitsquashesit
I don't need people to tell me that it's a bad idea to justify text in web pages (I have a manual line spacing and hyphenation algorithm to assist), but I'm just wondering if there's a solution, CSS or JavaScript, to handle this.
Sorry, wasn't very clear with my question: Each line is in a separate div element, e.g.:
<div>I want to justify this text</div>
<div>like this</div>
<div>But I don't mind if it squashes it</div>
I know about text-align: justify but it doesn't solve my problem — it justifies according to how the browser wants to, not by the each line I have. This may result in inappropriate line breaking or falling short of the right edge.
You cannot justify single lines of text.
However, you can hack together something that may work for you.
div{width:300px;
border:1px solid red;
text-align:justify; text-justify: newspaper;
}
div:after{
content: " ";
line-height: 0;
visibility: hidden;
}
http://jsfiddle.net/jasongennaro/zX9x5/1/
This only works if you are okay with an extra blank line under the content.
borders just for example to see spacing, etc.
H/T to #thirtydot for the idea: Justify the last line of a div?
You might try
text-align: justify;
in your CSS :-)

How do I keep a Label, Button, or TextArea as a single line?

Lets say I have a Label, Button, or TextArea object, that contains some amount of text. The way that things work by default is that text put in these objects will automatically word wrap around to the next line. Is there a way to disable this? I am aware that the CSS attribute
overflow : hidden ;
will stop the scrollbar from showing up. But is there a way to stop the text from going to the next line?
I wish it to be the case that if I have a string that is "wider" than the object it is placed within, it will simply write out the string to the limit of what the object can contain, without wrapping it to the next line? Anyone have a way of doing this?
Thank you.
You can use the following css definition to achieve this:
<style type="text/css">
.element {
width:200px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="element">
This text will not wrap. Hamina hamina hamina hamina hamina.
</div>
This should prevent any text from wrapping to the next line. If the text exceeds the width of the element, it cuts off. If you are using webkit / explorer you will get a nifty ellipsis effect where the text cuts off (to suggest that there is more text than is visible).
Unfortunately firefox does not support ellipsis. But the text will still cut off and will not wrap.
I haven't tested this defintion with button or textarea elements - only with divs. But I see no reason it should not work. I leave it to you to experiment.

sIFR 3 Leading and Kerning

I am trying to get leading and kerning to work on some sIFR 3 type on a site I'm working on (as described in the wiki: http://wiki.novemberborn.net/sifr3/Styling), but these two parameters seem to have no effect no matter what I do.
I am not using intergers (no 'px' or 'em') just as it requires. I've also tried several different font swf files, just to make sure it's not the font. I don't know why it doesn't work. All of the other css parameters that I assign to .sIFR-root work just fine. Here's a sample of my code using 'leading'.
In sifr_config.js:
sIFR.replace(snl, {
selector: '.section-title h1',
css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
wmode: 'transparent'
});
In the HTML doc:
<div class="section-title">
<h1>sIFR Text</h1>
</div>
(I've also tried the css code with and without the square brackets, as I've seen it done both ways. Doesn't seem to make a difference).
What am I doing wrong? Any help would be greatly appreciated; thanks!
ETA: Found an less hackish way:
line-height seems to work when added to the CSS for the replaced element (in my example that'd be: .sIFR-active .section-title h1). So I was able to use regular old line-height to fake a margin.
All righty—since this one left everyone speechless, here's what I discovered:
Originally, there were many suggestions for using leading as a replacment for margin-top or padding-top since these will not work with sIFR. This is what I was trying to use it for. I had a single line of text and needed to give it some space up top, so I was trying to do this by increasing the leading (line height) to no avail. I think this worked at one point, but then as I was looking at the change logs for all the revisions of sIFR, I found a note about a "fix" to leading. Apparently the developer considered leading being recognized on single-line text as a bug, so "fixed" it so that leading is only applied when the text is multiple lines. I tested by putting a line-break before my text, and sure enough, leading started to work!
So it seems that now, in order to achieve a top margin on my sIFR header, I have to add unneccessary code one way or another—by wrapping it in a div or span with a top margin, or by adding a line break and using negative leading.
I still have no idea about the kerning, but letter-spacing seems to be working, so…
If anyone has any additional insight to offer, I'm all ears!
Here's what works for me, using sIFR 3 to get a h2 with Serifa font in red with minimal letter spacing and leading. The actual sIFR swf is nothing special, simply created as per the sIFR documentation. As mentioned above, offsetTop and tuneHeight also work for adjusting positioning (shown below although I haven't used them so set to 0).
In sifr.css
.sIFR-active h2.replace {
color: #FF0000;
visibility: hidden;
font-family: arial,helvetica,clean,sans-serif;
font-size: 2.5em;
text-transform:uppercase;
}
in sifr-config.js
sIFR.replace(serifa, {
selector: 'h2.replace',
css: ['.sIFR-root { letter-spacing: -2; leading: -15; kerning:true; color:#FF0000; text-transform:uppercase; font-size:2.5em; }' ],
tuneWidth: '0' , tuneHeight: '0' , offsetTop: '0' });
In html page (for example):
<div class="column grid_4">
<h2 class="replace">Title here</h2>
</div>

Break long text

I have a div which has width of say 200px. It does not show horizontal scroll bar. Now if anyone types any word more than 200px worth, it is simply hidden. I am wondering if its possible to automatically put a newline tag after every word reaches 200px length?
Thank you for your time.
You can achive this using simple CSS using
WORD-BREAK: break-ALL.
<div style="width: 200px; word-break: break-all">Content goes here</div>
Hope this is what you were looking for...
It's a tricky problem, but you should probably read http://www.quirksmode.org/oddsandends/wbr.html.
basically, there is somewhat inconsistent support and the linked article proposes use of:
wbr:after { content: "\00200B" }
in your css, and using the <wbr/> tag in your html
There is a soft-hyphen that lets you define where a word can be broken up (For example, prod-uct-iv-ity) which doesn't display any hyphens, just defines where they could show up if the word has to wrap lines. It is entity ­
If you have mono-spaced font, it'd be easy to count number of characters, and just insert a break-tag. But it's harder to calculate where to put in the break-tag with normal fonts.
For IE, you can set word-break: break-all; which will break words when they reach a certain length...
word-break is good, but it is said not to work in firefox. (haven't tested.)
For firefox, use javascript.
It does work in webkit though.

Categories

Resources