Break text surrounded by other elements in the same line - javascript

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" />

Related

Dynamically responsive grid-style container in CSS

In my application a user is able to input text and click a button to append a new 'span' to the DOM (within a container) containing their inputted text. I want these spans to have as much width as needed to fit the given user inputted text (you can assume the user wont input something longer than the container's width). I would also want the container to fit as many spans as possible within in a row; and if a span needs more room than is left in the current row -> go to the row below (see the last two lines of the picture).
What kind of CSS would I need to add to my container as well as the spans within it to achieve the organization below?
Please Note: the width of this container is fixed, but the height grows as needed to fit new text filled spans
As per you mockup, You can achieve your task by two way:
Use flex CSS3 property
Use CSS3 property width auto and float left in span class.
let span class="class-name"
.class-name {
display: inline-block;
width: auto;
float: left;
}
In this span class, you can add more property as per your need.
To do this with the CSS3 flex property:
.container {
display: flex;
border: 1px solid red;
width: 20rem;
flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
justify-content: space-between; /* alternatives are space-evenly or space-around*/
}
see this pen, with flex you have the advantage that you have better control over how this width of the container is uses, with the float solution you cannot justify the content, it will all stick to the left and leave unused space on the right.

How can i make HTML p having text box properties?

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>

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/

Limit text to x number of lines and append '...'

I am looking for a Javascript/jQuery + CSS way to limit a text (for example a product name) to say, 2 lines. But the visitors need to know that it is truncated and therefore I will need to append '...' at the end.
The original way I thought of doing this was to put the text in 1 line, measure the width of it and cut it off just before the text reaches 2 times the width of the containing div, but it seems tricky as each character probably needs to be caculated for its width rather than that.
Limiting it to number of characters or words will not work in this case - I would like to fully fill the 2 lines of that div every time, instead of having gaps.
Is there a nice way to achieve this instead of using a monospaced font?
Since you're using jQuery try these plugins:
http://dotdotdot.frebsite.nl/
https://pvdspek.github.com/jquery.autoellipsis/
https://github.com/theproductguy/ThreeDots
https://github.com/jjenzz/jquery.ellipsis
We can use css for this:
.truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block; /* for links */
}

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