My web page has input fields to which I have applied the following css :
.ellip {
white-space: nowrap;
width: 200px;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
But this doesn't seem to have any effect.
Am I missing something obvious here or is it not possible to have an ellipsis in an input field using CSS only?
Setting text-overflow:ellipsis on the input itself did the trick for me. It truncates and places the ellipsis when the input is out of focus.
I know this is an old question, but I was having the same problem and came across this blog post from Front End Tricks And Magic that worked for me, so I figured I'd share in case people are still curious. The gist of the blog is that you CAN do an ellipsis in an input in IE as well, but only if the input has a readonly attribute.
Obviously in many scenarios we don't want our input to have a readonly attribute. In which case you can use JavaScript to toggle it. This code is take directly from the blog, so if you find this answer helpful you might consider checking out the blog and leaving a comment of appreciation to the author.
// making the input editable
$('.long-value-input').on('click', function() {
$(this).prop('readonly', '');
$(this).focus();
})
// making the input readonly
$('.long-value-input').on('blur', function() {
$(this).prop('readonly', 'readonly');
});
.long-value-input {
width: 200px;
height: 30px;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-value-input-container">
<input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
</div>
From my testing Chrome, Safari and Firefox now support it.
However they do have slightly different effects.
On blur Firefox appends ... to the right of the text but only if there is any text hidden by the right hand side of the text box.
Whereas on blur Chrome seems to jump to the beginning of the text and appends the ... at the end, regardless of where you left the scroll position of the text.
A field is an element with its own rules. The input field is implemented in the way that if the text gets longer than the field, the text gets just unseen.
The reason for this is, if you use the field in a form and it would be possible to use text-overflow ellipsis, then it would only transmit the truncated content, what is not the wanted effect.
Related
I have a text input that I want to keep at a fixed width of 300px. The value of the text input is allowed to extend beyond what fits in this. When the text does extend beyond the bounds of the input I want the text to be truncated with ellipsis, but when focused the input should be horizontally scrollable.
This behaviour is all provided with text-overflow: ellipsis;. The problem is that when unfocused the input remains horizontally scrollable, but since the text is truncated it just scrolls into white space. How can I stop this from happening?
Testing the following code I get the issue in Chrome (108.0) but not Firefox or Safari. Is this just a characteristic of Chrome that can't be avoided?
<form>
<input
type="text"
style="width: 300px; text-overflow: ellipsis"
value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf"
/>
</form>
This is what it looks like when you scroll right: Image of unwanted behaviour.
I have tried adding overflow: hidden; and white-space: nowrap; to the input, as well as these attributes on the surrounding form, the div above the form and even a div surrounding the input within the form. All of these result in either the same behaviour or other behaviour outside of the specification described above.
There is this related question, but there is no satisfactory answer there and I have been able to narrow it down to being a Chrome problem... Input element scrollable with text-overflow ellipsis enabled
I believe it's a known Chrome issue. You can work around it with a little bit of JavaScript, if that works for you?
You may want to look to target Chrome only.
//Locate all elements with class inputContainer
document.querySelectorAll('.inputContainer').forEach(container => {
//Bind a click event to each of those elements (parent)
container.addEventListener("click", function() {
//Turn on pointer-events (defaulted to off in CSS)
//and focus to prevent need to double click for focus
container.querySelector('input').style.pointerEvents = "auto";
container.querySelector('input').focus();
});
});
//Bind a blur event to all input fields to turn pointer-events back to "none"
document.querySelectorAll('input').forEach(input => {
input.addEventListener("blur", function() {
this.style.pointerEvents = "none";
});
});
<form>
<!-- Added container -->
<div class="inputContainer">
<input type="text" style="pointer-events:none;width: 300px; text-overflow: ellipsis" value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf" />
</div>
</form>
I got a list of companies names in . Some of them can have name with length till 100 characters. And its looks not very nice when user pick it.
I tried these rules
{
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
but its not working.
What should I do?
All you really need is:
input[type=text] {
text-overflow: ellipsis;
}
But,it seems that materialize only actions the css rule after a second click - the first click or tap being the choice, still displays the option as traditionally cut off.
https://codepen.io/doughballs/pen/LYVVXJM
I like displaying emails properly, meaning not [at].
To fight the bots I reverse the text in the html and then re-reverse it with css using direction: rtl. That worked fine for many many years, until an email dared to break lines.
You can see what happens on the screenshots; kinda hard to explain–
Thats the mess that happens
This is how it looks when there is enough space
The http-host is always the same, so I figured using text-overflow: ellipsis together with white-space: nowrap and overflow: hidden on the <a>. That went south aswell;
(side note: it wasn't possible for me to fully highlight the visible text?)
(The end of the highlight is NOT the end of the box!)
Okay; the text-overflow clipping comes first, then the reversing; I get it.
So lets put overflow: hidden and text-overflow: ellipsis on the parent, which is a <p> and the white-space: nowrap on the a (scared that a telephone number will get chopped off)
I played around with a combination which styles go to the p and which to the a .. and I had one solution (which I unfortunately can't reproduce oO) where the dots were at the right side (which is what I want) but the text still gets chopped of an the visual left of the outcome, meaning the name name of the email, which I do not want to clip!
Long question short..
How can I get the following result?
S.Rossa#park-reside...
When my email markup looks like this:
<a href="/email.php?to=rossa" class="direction">
<?php echo strrev("S.Rossa#park-residenz-alfeld.de"); ?>
</a>
Out of many reasons I cannot go back from the direction: rtl thing on the emails.
Please keep that in mind when suggesting a way to
keep the email from breaking lines, no matter what
and a convenient way to clip it with ...
with css only
Thanks!
The browser is given a string. When you tell it to shrink it and replace what doesn't fit with an ellipsis, it will always cut from the end of the string. It doesn't know your string is reversed and it trusts you when you tell it: this string should be read from right to left (direction:rtl). The end is on the left side.
Therefore, with CSS alone, the closest (and most decent) thing you can get is cutting from left side and placing the ellipsis where the cut was made:
a.direction {
direction: rtl;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* proof of concept: */
width: 25%;
display: inline-block;
}
ed.dlefla-znediser-krap#assoR.S
You have two options now. Either
give up on text-overflow: ellipsis and fake it using JavaScript (works, but it's ugly) or...
you could reverse the string before you render it and give up on direction: rtl (which is actually a trick, it's not correct and is the source of the problem). Of course, you need to make sure you only do this for browsers, not for bots. The easiest way would be to check navigator.userAgent:
if (!/bot|crawler|spider|crawling/i.test(navigator.userAgent)) {
var directions = document.querySelectorAll('.direction');
for (var i = 0; i < directions.length; i++ ) {
directions[i].textContent = directions[i].textContent.split('').reverse().join('');
}
}
a.direction {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 25%;
display: inline-block;
}
ed.dlefla-znediser-krap#assoR.S
However, navigator.userAgent is not to be trusted, as malicious bots will never declare themselves as bots. So you might want to use safer methods of excluding bots, such as a link (clickable only by bots) pointing to a php script that would set a session variable for them. If the variable is set, just add an invisible element to your page and in the above JavaScript, instead of checking navigator.userAgent, check for the added element.
If you want the emails correctly indexed by certain search engines, you should exclude them from this check.
I am calling few sentences from a JSON file and append it in a <p> tag.
<p>
Thank you all for another magical night spent together
this last sunday at The Hippodrome in Baltimore.Thank yo...
<p>
And i'd like to shorter it, even it's already been shorten in the json, am i able to use pure css or html to limit it's length?
I don't need any javascript/Jquery suggestion because if comes to javascirpt it's easy to accomplish this task, i might just play with dom, but in this case i want to see if there's any pure html and css method can do this.
UPDATE 1:
Everyone suggest me to convert the sentences in to one single line using white-space: nowrap and then hidden text by setting text-overflow:ellipsis but there's a limitation, the html can just display single line. Is there anyway to display another line?
CSS and HTML can't get length of the sentence. So, we don't have limit for CSS and HTML can't get length of the sentence. So, can't set limit length for the sentence. But if you want use CSS to truncate a line of the sentence with max-width of element. You can do:
p {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
If you are single line, use text-overflow:ellipsis attributes to achieve a single line of text to display an ellipsis (overflow …). Of course, some browsers also need to add width attributes.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
If it is a multi line, use WebKit CSS extended attribute (WebKit is private property) -webkit-line-clamp;. Attention: WebKit browser or mobile terminal (the majority is a WebKit based browser) page are easy to be implemented in the: This is a non-standard attribute (unsupported WebKit property) the, it does not appear in the draft of the CSS specification.
-webkit-line-clamp is used to limit the number of rows in a text displayed by a block element. In order to achieve this effect, it needs to be combined with other WebKit attributes.
Common binding properties:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
you can use as also the link https://developer.mozilla.org/en/docs/Web/CSS/text-overflow
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px; /*width as you want */
}
Use this example:
<p style="width: 150px;height: 15px;overflow: hidden;">
Thank you all for another magical night spent together
this last sunday at The Hippodrome in Baltimore.Thank yo...
</p>
You'll want to truncate the text with CSS, and by the looks of it, you want multi-line text boxes that truncate correctly at the end (the answer by Anubhav is single-line specific). Because no pure-css options exist (that I'm aware of) to handle this, you'll probably need a jQuery plugin, such as clamp.js or similar.
The answer you probably want is from another SO thread, here:
https://stackoverflow.com/a/33061059/5580153
Edit: There is also a fairly intricate CSS solution here: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ although it's a bit of a hacked solution I feel.
you can use text-overflow: ellipsis; instead. please read the example below.
<div id="readmore">Thank you all for another magical night spent together
this last sunday at The Hippodrome in Baltimore.
</div>
CSS
#readmore {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000;
}
For more info please through this reference
I would to make a readonly input appear like a pre or div tag with CSS.
I would have thought that it would have been easy to do with a textarea but it seems to be quite the task. I'm able to hide the border and the resizing but, for whatever reason, I can't make the textarea's height be determined by it's content.
I've seen a lot of stuff on using javascript to auto-resize textareas but is there anything I can do if it's static text that doesn't require javascript?
UPDATE
I just wanted to clarify the purpose of this: I'm looking to write, re-write with javascript, and submit a single readonly element with forms and, at the same time, not have it constrained to a single inline area which forces, at best, scrolling and, at worse, loss of data.
UPDATE 2
Per the request, I've created a fiddle to show an example of what I'm trying to do: http://jsfiddle.net/BUwdE/1/ .
textarea[readonly] {
width: 100%;
border: 0;
resize: none;
overflow: hidden;
}
You'll see that the content is cutoff at the bottom because the textarea's height isn't determined by its content.
I actually tried to do what you have been doing. But since it is going to be a read-only input, I actually ended up applying a CSS to a div element. This will be a hack which releases our headache.
HTML
<div class="faketextarea"> some long long text </div>
CSS
.faketextarea {
// css of a text area
}
You can specify the height of a textarea in HTML using the rows attribute, but that doesn't automatically resize. You might have to appeal to the W3C CSS Working Group to get what you want.
<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">
Modified from here:
function auto_grow(){
var ts = document.getElementsByTagName('textarea')
for (i in Object.keys(ts)){
ts[i].style.height = "5px";
ts[i].style.height = (ts[i].scrollHeight+49)+"px";
}
}
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
...
(properties for your needs)
}
<body onload='auto_grow()'>
<textarea>anytexts</textarea>
<textarea>texts 2</textarea>
</body>
The differences being I have assigned the auto_grow() function on the html <body> tag instead of the <textarea> tag
fiddle: https://jsfiddle.net/btq7m3a6/
More: https://jsfiddle.net/8o67huq2/