CODEWITHSUNDEEP
htmlcss
Metal Mathematician
Metal Mathematician

Reputation: 416

Make a span act like an input field when overflowing

I am duplicating my input field value in a span which is placed directly on top of the input field. (Doing this to manipulate only part of the text)

I am having problems with the overflow.

Currently if I continue typing past the limit of the input field, the span will just expand infinitely. enter image description here

Is there a way, to have the span act like the input field would and scroll the text to the left as more and more characters are added?

Current span styling: 

style="display: inline-block; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;"

EDIT

<div style="position: relative;" class="input-box">
                    <input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="street
                     input-text"/>

                    <span id="street1span" class="input-text" style="display: inline-block; width: 100%; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;" ></span>
                </div>

Upvotes: 3

Views: 4948

Answers (5)

Ankit Saxena
Ankit Saxena

Reputation: 1

Try this:

<div style="position: relative;" class="input-box">
    <input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="street
        input-text"/>
    <br /><br /><br />
    <hr />
    <span id="street1span" class="input-text" style="display: inline-block; width: 100%; padding: 1px; border:1px solid #ccc; width:300px; overflow-x:scroll;" > hellhellhellhellhellhellhellhellhellhellhellhellhellhello</span>
</div>

Upvotes: -2

user7110739
user7110739

Reputation:

Try This: 

* {
    font-family: Arial, sans-serif;
    font-size: 12px;
}
 input {
    display: inline-block;
    position: absolute;
    top: 0.25px; 
    left: 2px;
    padding: 1px;
    overflow-x:auto
  }
<div class="row">
    <input type="text" placeholder="something span"  />
</div>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Try This :

span {
    border: 1px solid #CCC;
    width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

input[type="text"] {
    width: 200px;
}
Span :<span contenteditable="true"></span>
<br><br>
Input:<input type="text" name="">

After Edit your Post :

span {
    position: absolute;
    top: 100px;
    left: 2px;
    padding: 1px;
    z-index: 2; 
    border: 1px solid #CCC;
    width: 200px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}
<div style="position: relative;" class="input-box">
    <input style="color: #000; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="streetinput-text"/>

<span id="street1span" contenteditable="true" class="input-text" >
    </span>
</div>

Upvotes: 3

Mayank Singh Fartiyal
Mayank Singh Fartiyal

Reputation: 957

You can do

html

<span id="flow"></span>

CSS

.flow{
     overflow : hidden/auto; // depending on your choice
}

Upvotes: 0

veera
veera

Reputation: 327

you can add overflow-x:auto; in your span

Upvotes: 0

Related Questions