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/
Related
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?
In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}
I have an a href inside a div, and this link inside a table cell is multiline and text-align centered.
Now the whole cell becomes clickable, since the a href is filling the whole space except a little area closest to the border. I want the area around the link-text to not be clickable, and only the text.
this is the css:
tbody td.link a{
display: inline;
font-family: Arial;
font-size: 15px;
color: #545454;
position: absolute;
padding-top: 4px;
z-index: 10;
}
Since the z-index is 10, then the link is "closer to the user" than the background, and if I change this the whole link is disabled.
I also tried this, but without result:
$('td.link').find('a').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
});
Summary: Is there a way to make only the actual text characters of a link clickable, and not the background?
THanks!
You cannot, because the actual text does not constitute an element. An element always contains some empty space around the characters (not to mention their inside). But you can limit the area occupied by the element. This may mean removing its padding, setting its line height to a smaller value (maybe 1), and changing a block element to an inline element. For more specific advice, you need to provide more specific information (HTML and CSS code).
I'm guessing you have a problem with the padding:4px
since padding is part of the element, it becomes clickable. I would suggest, using margin,
or padding on the parent element. (you could use box-sizing:border-box, to solve any sizing problems.)
You add this style
tbody td.rank a{
text-decoration:none;
}
Well Im stucked at this point.please take a look at this http://jsfiddle.net/karthik64/5jhgF/3/
Okay first enter some input into the input box and hit enter you would see a span element added to the div and try to input some more values and
I guess you got what the problem is.Could anyone tell me how do i fit those <span> tags in <div> tag in a nice manner.
I have set my div tag width and using javscript I add some elements to div tag and I get some kind of wierd bugs something like for example . if user enters dennis ritchie , steve jobs and bill gates my code works likes this
..dennis ritchie.. ..steve jobs.. ..bil
l gates..
Instead it should be like this
..dennis ritchie.. ..steve jobs..
..bill gates..
if it cannot fit the span tag in that remaining space, I want the whole span tag element jump to next line instead of breaking the span tag value how do i do that .please help me with this.any help is greatly appreciated.Thanks
<span>s are not block-level elements and are not rendered like you describe by default (they wrap with text). Apply the CSS display: inline-block; to your spans to stop them from wrapping.
On newer browsers, add display: inline-block; to the .music_elements style rule.
On older browsers, float: left; might work.
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.