I have an textarea element that contains a list of strings. I've written some CSS to highlight the first string (line).
However, this doesn't work well when a long word appears that wraps to a new line:
#example:first-line {
background-color: #BA2F00; /* BazFoo */
color: #F00BA2; /* FooBaz */
}
textarea #example {
word-wrap: break-word;
}
<textarea id="example" style="width: 200px; height: 100px;">
ThisIsALoooooooooooooooooooooongWord
</textarea>
The question is, how do I highlight the entire wrapping first line (i.e. ThisIsALooo...ongWord) using CSS?
unfortunately, there's no pseudo attribute for first word... you may have to use Javascript to accomplish this. CSS to select/style first word
To do this with Javascript, think about the whole text inside the text area as an array of words, and take the index 0, add a span with a style.
take out the first-line in #example:first-line, just leave it as
#example
oh yah and also add the word-wrap:break-word in the # example, it's easier like that.
Related
I'm looking to have a scroll effect (left to right) on text placed inside code tags within a pre tag. I've tried the overflow: scroll attribute without success. An example is this:
<pre><code>
var text = 'This is a bit of longer text that ends up wrapping around and messing up the rest of the formatting.';
var object {
text: text,
key: 'A second key with some more really long text that will overflow onto the next line',
}
</code></pre>
What style do I need to give to my code element to allow the text to wrap without effecting the formatting of the code? Ironically code in stack overflow has the effect I'm looking for though I can't seem to replicate it.
*I've updated the question to add that the code is in a pre tag which preserves line breaks and formatting.
Here is a simple and good example on how to do it !
HTML
<div class="code-holder">
<code>
ar text = 'This is a bit of longer text that ends up wrapping around and
messing up the rest of the formatting.';
</code>
</div>
CSS
.code-holder{
width: 560px; /* your prefered width */
overflow-x: scroll;
height: 60px;/* Your prfered height*/
}
.code-holder code{
white-space: nowrap; /* this rule is important*/
}
Take the code here:
<p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>
Sample: http://codepen.io/dbugger/pen/KrAmPx
How can I make the input look like totally normal text, inside the paragraph? I set it to display: inline but the width seems still fixed.
Elements inherit certain default values from browsers. You need to "reset" all of them in order to make the input element appear as the surrounding text:
p input {
border: none;
display: inline;
font-family: inherit;
font-size: inherit;
padding: none;
width: auto;
}
This is as close as you can get with CSS alone. If you want a variable width, you will have to resort to JS instead of CSS, as adjusting an element to it's value is way beyond the scope of CSS. Modifying elements after the fact, based on user input or changes due to just-in-time effects, is what JS/jQuery are used for.
Note that depending on the browser you're using (and due to the possibility that future browsers might do things radically different that nowadays' practices), this list is not necessarily exhaustive.
The only way you can "fake" this effect in a clean manner without JS is to use an element with a contenteditable attribute, which (unlike an input element) will store user input in the content of the element instead of its value. For an example of this technique, see this answer
Though while you won't need JS to get the effect, you would need it to retrieve the content of the element. The only use past that I can imagine is if you're providing a printable document that never needs to programmatically handle the input or store it.
It looks like this is possible now. I found a post describing how to style the input so the HTML form styles are stripped.
Styling HTML forms
They used the following CSS, and for what I was trying to do, it worked perfectly:
input, textarea {
font : .9em/1.5em "handwriting", sans-serif;
border : none;
padding : 0 10px;
margin : 0;
width : 240px;
background: none;
}
Obviously this is too late for the original author, but I'm hoping other people will benefit from it.
Yes it is possible to do this by mimicing the styling with CSS and by using javascript to automatically adjust the length of the text.
Resize an input to the size of its content.
$(function(){
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
}).on('input', function () {
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
});
body,
#txt,
#hide{
font:inherit;
margin:0;
padding:0;
}
#txt{
border:none;
color:inherit;
min-width:10px;
}
#hide{
display:none;
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ...">
egestas arcu.
</p>
Probably the best way to hack this is just to make your text field into an edit text field but make it uneditable, that way your text field and edit text fields will look the same.
2020 update. Partially you can make it look like normal text with appearance property, setting it to none. Unfortunately, there is nothing much you can do to make the lines wrap, except use js to replace it with the value. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
I hope this is the answer you're looking for, but if you want to make an input field look like a normal paragraph (assumably so you can edit some of the text of the paragraph), the best way to do so is to:
Disable the input's border
.maskedinput {
border-style: none;
}
And then give it the same styles as the parent element, i.e. text color and bacground color etc etc, and then add a :focus to your CSS that changes the background color such that when the field is clicked, it will be highlighted.
Instead of using the <input> tags, you can use the <textarea> tags. They work almost exactly like <input> tags.
<textarea name="variable" rows="4" cols="50">
Placeholder
</textarea>
When I insert text dynamically with java (we are using .jsp), the paragraph gets extended across the border of the div, although it is perfectly fine if I copy paste the text inside. It is not an issue of white-space. The other example is what happens if I just manually copy the text in the developer's tools or use a static text.!
Break up the words in your sample text with some spaces or add the following to your style sheet:
p {
word-wrap: break-word;
}
Try this:
.class
{
max-width: 100px; /*or whatever*/
word-wrap: break-word;
}
Reference
I have crafted a webpage. It has many words enclosed in spans and h3 tags. Now I am trying to put some symbols at the end of text on the same line using CSS class. I can do this with class something like below using background-image property:
.newtohtml5{
width:fit-content;
background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-repeat:no-repeat;
background-size:2%;
background-position-x:right;
}
However the problem with this class is that the HTML5 symbol appears at the end of the line leaving huge space between the text and symbol itself. I want that symbol appear exactly after the text in the span on the same line, not at the end of the line having huge space between the text and the symbol.
I will not like to make any changes to HTML. Though any solution is appreciated. But CSS only trick will be great.
Assuming you don't require full cross-browser support, and are okay using only those browsers that implement CSS3 generated content and you want that generated content to appear immediately after the text contained within the span, you can use the ::after pseudo-element:
<span class="newtohtml5">text here</span> <br/>
With the CSS:
.newtohtml5::after {
content: ' (generated content).'
}
JS Fiddle demo.
It's worth noting that this generated content is after the content of the span, but still within, and a part of, the span itself.
You can also use attributes of the element to include in the generated content, for example, with the following CSS you can include the string contained within the class attribute:
.newtohtml5::after {
content: ' (.' attr(class) ').';
}
JS Fiddle demo.
You can also insert images into the content property:
.newtohtml5::after {
content: url(http://lorempixel.com/25/25);
margin-left: 1em;
}
JS Fiddle demo.
Is it possible with CSS(3) to visually/textually highlight line breaks, which were automatically inserted by browsers? Something like ↻ at the end of each wrapped line.
With sourcecode it's important to see where lines were wrapped, since newlines can be significant. Letting the user scroll horizontally isn't a good idea neither …
As far as I know, there is only way to do this using pure CSS, via the :first-line pseudo-element
Concept
Add a "visual indication" to every element, by default.
Select every :first-line element, to reset the styles.
Demo: http://jsfiddle.net/djpTw/
<code>
<div class="line">Too much code at one line. Learn to write shorter lines!</div>
<div class="line">Lonely line.</div>
...
</code>
CSS:
code {display: block; width: 150px;} /* <-- Not interesting, just for testing*/
code .line { color: red; /* Visual indication */ }
code .line:first-line { color: #000; /* Default color */ }
The demo is rendered as (black by default, red as "visual indication"):
Sadly, this is not possible in pure CSS. I suspect you might be able to fake it using a tall thin graphic attached to the bottom right with no glyph in the bottom and then glyphs proceeding up as far as your tallest reasonable run-on, with the glyph spacing carefully coordinated to your line-height.