Develop Reference

Text doesn't break in special case

I have a problem that the text doesn't break in a popup made with Vue.js which is included in the header like this:
The text breaks normally if I include the popup into the main screen, but doesn't if I include it into the header. I have also drawn border around the <p> element which contains the text and the border is drawn correctly.
Here is the sample code: https://codesandbox.io/s/cold-feather-3zi3d?file=/src/components/BasicModal.vue

The class .header-frame is adding the css:
.header-frame {
white-space: nowrap;
}
This is the reason for which the text does not break when inside the header.
Try adding
white-space: pre-wrap;
or
white-space: initial;

You could add the following style rule :
white-space: pre-wrap;
in :
<p slot="modal-paragraph" style="border-style: solid;whitespace:pre-wrap">

Try to remove :
white-space: nowrap;
from header-frame class

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?

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/

Wrapping data in a cell

I am trying to wrap a word in a cell. The <td> has a dedicated width e.g 50px, now i want to wrap the data inside that cell so that it doest get on the next line i.e:
Column 1
Some data
wrapped
Required:
Column 2
Some da..
I want to know if it is possible though javascript or CSS?

This can be done by the text-overflow property in CSS, when used in conjunction with some other style rules.
CSS:
.wrappeddata {
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The width: 50px defines the width.
The white-space: nowrap; prevents it from wrapping.
The overflow: hidden; stops it being visible past the 50px limit.
The text-overflow: ellipsis; makes the cutoff become replaced with '...'
To use it, simply:
<table>
<tr>
<td class='wrappeddata'>A block of text that is too long</td>
</tr>
</table>

Are you looking to truncate the text programmatically or just cut it off at the exact width of the container? If you just want the text to cut off then you can use overflow:hidden on the containing element and white-space:nowrap on the tag surrounding the text.

Using CSS you can style your td
td{width:50px;white-space:nowrap;}​
Here is an example with two tables.

Try to play for Text-overflow:ellipsis (on ie) and the overflow attribute (available in all browsers). You may find hard to do this purelly in css and js.
Getting 'dots' to be printed can be achieve client or server side. But you'll need to implement something to check if your text will be widther than 50px. If this condition is met you will have to shorter the text and add your dots.
Regards

<table>
<tr><td width="40" style="word-break:break-all"> YOur.........Longgggggggggggggggggg Text
</td></tr></table>

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.