Most elegant way to force a TEXTAREA element to line-wrap, *regardless* of whitespace
The CSS settings word-wrap:break-word
and text-wrap:unrestricted
appear to be CSS 3 features. Good luck finding a way to do this on current implementations.
Internet Explorer 11 word wrap is not working
In order to ensure that the answer is obvious to people visiting this question in the future: the OP (wesley) answered the question himself in the comments beneath the question:
The cause of the problem is that Internet Explorer 11 makes textarea
elements inherit whatever white-space
property is applied to the direct parent.
The resolution is to apply white-space: pre-wrap
to the textarea, as identified by Jean-François Beauchamp.
wordwrap for textarea using javascript or jquery
function charCountTextarea(textAreaId,e,limit,lineLen)
{
var code = e.charCode || e.keyCode;
newLines = $("#"+textAreaId).val().split("\n").length;
var t = $("#"+textAreaId)[0];
var lineIndex = t.value.substr(0, t.selectionStart).split("\n").length-1;
console.log('val t :'+$("#"+textAreaId).val()+' line index : '+lineIndex+' new lines '+newLines);
if(lineIndex == 10 && $("#"+textAreaId).val().split("\n")[lineIndex].length>(lineLen+1) && code!=8 && code!=46 && code!=33 && code!=34 && code!=35 && code!=36 && code!=37 && code!=38 && code!=39 && code!=40)
{
$("#"+textAreaId).val(($("#"+textAreaId).val()).substring(0, $("#"+textAreaId).val().length - 1));
alert('You are reached to limit');
return false;
}
if(lineIndex<5)
{
$("#"+textAreaId).val($("#"+textAreaId).val().wordWrap(lineLen, "\n", 0));
}
var countLine1 = $("#"+textAreaId).val().split("\n")[0].length;
if($("#"+textAreaId).val().split("\n")[lineIndex].length>lineLen) // which will count the total line char condition
{
console.log("In condition : ");
if(code!=8 && code!=46 && code!=33 && code!=34 && code!=35 && code!=36 && code!=37 && code!=38 && code!=39 && code!=40)
{
// to insert next line
insertTextAtCaret(document.getElementById(textAreaId), "\n");
}
}
}
Textarea to resize based on content length
You can check the content's height by setting to 1px
and then reading the scrollHeight
property:
function textAreaAdjust(element) {
element.style.height = "1px";
element.style.height = (25+element.scrollHeight)+"px";
}
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
How to make the line break on enterkey in textarea
welcome to Stackoverflow (SO). Information on subjects like this is easy to find here. Check this SO question, or this one. Next time, try searching SO first.
How to remove the space between inline/inline-block elements?
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Since this answer has become rather popular, I'm rewriting it significantly.
Let's not forget the actual question that was asked:
How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
The solution I had in my initial answer was to add font-size: 0
to the parent element, and then declare a sensible font-size
on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
Most of the possible issues with relative font sizes are not complicated to fix.
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can do this, as I usually do:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
Or, this:
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>Or, use comments:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>Or, if you are using using PHP or similar:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0
.
React: how to make an input only as wide as the amount of text provided?
Here is an approach from plain HTML/CSS and a working snippet , hidding the value typed inside a span
behind the input
set in an absolute
position
. CSS can make both span
and input
matching the same lenght/width. Stretching/collapsing a parent (label
) will finish the job.
In the courtesy of @silvenon you may also find a react sample below the snippet
var val = document.querySelector('#test');
let tpl = document.querySelector('#tpl');
let text = val.value;
tpl.textContent= text;
val.addEventListener("input", function () {// onchange ...
let text= val.value;
//console.log(text);
tpl.textContent= text;
});
label {
display: inline-block;
position: relative;
min-width: 2em;
min-height: 1.4em;
}
#tpl {
white-space: pre;
/* max-width : could be wised to set a maximum width and overflow:hidden; */
}
#test {
font-family: inherit;
font-size: inherit;
position: absolute;
vertical-align: top;
top: 0;
left: 0;
width: 100%;
background: white;
}
<label><span id="tpl"></span><input id='test' value="Some test to try" ></label>
Related Topics
Where's the Connection Between Index.HTML and Index.Js in a Create-React-App Application
How to Toggle Class Using Pure JavaScript in HTML
Converting Em to Px in JavaScript (And Getting Default Font Size)
Jquery Mobile Prevent Scroll-To-Top Before Page Transition
Capture Keys Typed on Android Virtual Keyboard Using JavaScript
Jquery Ajax Success Callback Function Definition
Asynchronous Exception Handling with Bluebird Promises
Sending Message from a Background Script to a Content Script, Then to a Injected Script
How to Use Jquery with Reactjs
JSON.Stringify Output to Div in Pretty Print Way
Get the Dom Path of the Clicked <A>
How to Inject a Style with an "!Important" Rule
Jquery .Animate() Stop Scrolling When User Scrolls Manually
How to Use Materialize-CSS with Angular
Why Can't JavaScript .Play() Audio Files on iPhone Safari
Call Python Function from JavaScript Code
Js & Jquery Can't Detect HTML Elements, and Say's They Are Undefined