How can i make HTML p having text box properties? - javascript

I want to give html input text box properties to html p element.
If you type anything in text box and text exceeds width of text box, it automatically slides down in left direction making left most character hidden and new character appended at the end. This is text box default behavior.
I want to achieve same thing with HTML p,
I have a situation where p is used to hold text. I mean whichever key you type that character will be displayed in p and each character will be appended at the end. As number of character increases more then the p's width, appended character at the end (right most) becomes invisible. That is characters are not shifting in left direction as they do in text box.
Showing scroll in p is not an option (as in text box also you don't see scroll) so that is ruled out.
Can anyone give me any input to achieve this? I am not using any library.

You can use contenteditable attribute, mixin some CSS properties like white-space and overflow:
p {
white-space:nowrap;
max-width: 100%;
overflow: auto;
}
<p contenteditable="true">Edit this <p> element with a long text</p>
EDITED
Due the comments section, OP needs to hide the scrollbar, so the final code should be:
p {
white-space:nowrap;
max-width: 100%;
overflow: hidden;
}
<p contenteditable="true">Edit this <p> element with a long text</p>

Related

Break text surrounded by other elements in the same line

I'm trying to display 3 DOM elements in a row. The 1st and the 3rd ones are divs with constant width and height, the one in the middle is text and can grow. The height of 1 and 3 has to be equal to the height of a single line of text.
The problem begins when the text element grows long. I'd want like to display 1 before the first line of text and 3 right where the text ends.
The combination of two changes helped me to achieve this:
I set flex-wrap: wrap for parentContainer
.parentContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
I wrapped each word into its own <span>...</span>
Although this approach displays the elements correctly, I have two problems with it
Instead of using Unicode line breaking algorithm I have to break text into words myself. The text is not guaranteed to have any whitespaces, unfortunately.
Double mouse click only selects text within a single span instead of the entire text.
I wonder if there is a different approach to it that isn't prone to the issues described above?
I think the key to achieving this might be to use css to set the display property of the icons/divs to inline. You may have to play with sizes to get things how you want them but making the image an inline element allows you treat it as if it were just another word.
In this example, I linked an image to simulate your bounding elements.
img {
width: 30px;
aspect-ratio: 1;
display: inline;
vertical-align: middle;
}
<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> text text here text here more text here even more text here text here more text here even more text<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" />

How to highlight text which is hidden under ... due to text-overflow:ellipsis

Im implementing a highlight word functionality based on keyword in the search.
So based on the keyword im replacing the content with span tag and adding class as "highlighted-text"
value = value.replace(RegularExpression, `<span class="highlight-text">${value.match(re)[0]}</span>`);
CSS for highlighted-text
.highlighted-text{
background:yellow;
}
and im also using this css to achieve clipping of text with 3 dots. As you can see in picture below.
.message{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
So its working fine
But let me search for word which is hidden inside clipped text ie. "..." like "hockey"
So its not showing up as its hidden. I want to show the user correctly highlighted text with its before text and after text to some limit.Is there any ideal way we can achieve this is in javascript or css?

How to position <span> elements under each other based on the width of the <span> element

This will sound pretty basic and stupid question, but I have to get this working hence asked on this channel.
I have elements in a span that I want to place next to each other, I have a width for the span element. I want the elements in that span to respect the width and when they grow beyond that I want them to fall on to the next line.
<div class="text">
<span>
eel1
</span>
<span>
eel1
</span>
<span>
eel1
</span>
<span>
eel1
</span>
</div>
// these values are array of strings that I populate inside this span
this is how it currently looks:
https://jsfiddle.net/gpjcutr9/2/
so I'm looking at getting this as output.
ele1, ele2, ele3,
ele4, ele5, ele6
So depending on the width of the span I want to be able to show that many elements in one line. Also since this is not static HTML and is dynamically generated spans for these elements.
Thanks!
Remove the clear: left; from span in your css. That's saying that each span element shouldn't allow floating elements on their left causing the spans to go to the next line.
Also change the width of the test class. At 20px, it is too small to fit the span elements.
Your css should look something like this:
span {
float: left;
}
.test {
width: 100%;
}
.spanWidth {
width: 80px;
}

Line-Wrap issue for highlighted span

I have this highlighted span in which you can type text
jsfiddle
You can click on the white area and start typing. Now when you type and you reach the and I would like it to wrap.
The HTML is not very special:
<div>
Complete the story:<br>
Once upon a time there was <span></span>. And they all die :)
</div>
<input>
To make the typing possible I use a hidden (not hidden in the demo) input field. Anyway, now when you start typing and you reach the end of the line it should wrap as follows:
I've tried things like word-wrap:break-word; but that didn't work very well. Is something like this even possible ?
You can't wrap text in an input. You could use a textarea instead. You will have to adjust your CSS for the size of the span to grow as the text spans multiple lines, by changing the height to min-height:
min-height: 20px;
See this fiddle for working version: https://jsfiddle.net/3L4bazg6/7/
I've also removed some of the styling in your span rule to get the wrap effect you are looking for.
Here's another fiddle that hides the textarea completely: https://jsfiddle.net/3L4bazg6/10/
And, here's a fiddle that does away with the textarea and the JavaScript completely and just uses contenteditable:" https://jsfiddle.net/3L4bazg6/17/
Refering to your js fiddle
Change display: inline-flex; to display: inline;
Remove height: 20px;
Add line-height
here is your updated JSfiddle
https://jsfiddle.net/sewpjeta/9/

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.

Categories

Resources