Is it possible to truncate text in input type="file", I mean, when I select file if filename is too long it should be truncated. I tried to apply text-overflow: ellipsis; but nothing changes.
If you specify a fixed width for the input, most browsers should truncate it themselves. If not, you can still use text-overflow: ellipsis but it won't make any difference until you use it with two additional properties and also with width:
input[type=file] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
Are you trying to actually truncate it, or change the display? You cannot actually set the value, because that is a security risk -- no browser allows that. To change the display of the value, you could do what matewka suggests. For more control over the appearance, you could also hide the input and replace it with a <span> containing the value in question, like this: http://jsfiddle.net/TexasBrawler/jrJm2/2/
How to truncate filename for input type file:
If you have a container around your file input you can set it to display: flex; and it will truncate with ellipsis.
Try messing with the width in the example below and trying removing display: flex; to see the text overflow the container with no truncation.
.file-input-container {
display: flex;
width: 160px;
padding: 10px;
background-color: #CCC;
}
<div class="file-input-container">
<input type="file" />
</div>
For all major browsers, I don't think you can set what is in a file upload box, because that would open the door for you to trick or force users into uploading files to you that they shouldn't (not that you would, but other malicious people might).
Can you explain the problem you're trying to solve in a little more detail? It isn't clear to me why you would care about the length of the file name - aren't you really interested in the file's contents?
Related
Weblinks are not responsive, they increased the mobile page width and create bad user experience.
I am using Asona theme.
Fix this problem, the weblinks doesn't bend and goes on next paragraph, they are just goes straight.
try using the overflow-wrap property to break the string enabling it to wrap onto a new line.
overflow-wrap: break-word;
Since in cases like these, people will just want to click the link and not read it, you could simply use overflow: hidden on the direct container, i.e. the lis of that list.
And you could also add text-overflow: ellipsis; to make clear that the link is longer than what is visible on the screen:
ul.link_list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul.link_list {
padding: 20px;
}
<h4>Link List</h4>
<ul class="link_list">
<li>https://www.example.com/kjhadfkjh/oiuwoijwrv/ljnsvkjns/oiwueroiuwe/kjnsdvkjn/llksuerlkulku/lkamsclkm/lkjaelrkjl</li>
</ul>
I want to be able to add three dots and maintain a text in a single line in a responsive design.
So for example:
I have a link with a link inside a container element (e.g. <span>). If the text is long, it will shown in two lines one a small screen:
This is a very long text
and it wraps because it's very long
I want that text to be shown like this:
This is a very long text...
text-overflow: ellipsis; works if you have set a width to the container, but in responsive design and on my web app it's not specified obviously.
Here's the HTML:
<div class="itm-title">
This is a very long sentence and I don't want it to wrap, I want three dots
</div>
Is there a solution in CSS or jQuery that can solve this? thanks.
You actually don't need width to be "set" here. All the elements in the responsive design have their width. You can just do it around with the following rules:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Comment: This doesn't work with anchor:
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.
It works! :)
No width set.
Using <a> tag.
Updated with OP's Code
.itm-title {
width: 150px;
}
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="itm-title">
This is a very long sentence and I don't want it to wrap, I want three dots
</div>
Result: Works!
My page displays a set of news items, each with a headline. The headline can be a variable number of words, but I’d like them to always be on two lines with as balanced widths as possible. For example:
Announcing Bosun, our new open
source monitoring & alerting system
Stack Exchange for
the iPad is here
A
headline
Obviously I could chuck in a <br> element at the correct break point and I could even try to calculate its position automatically, but is there any CSS that will do this for me? It’d be nice to get this working in a responsive layout. I don’t care particularly about browser compatibility so answers that reference upcoming specs that achieve what I want will be accepted too.
So there’s no way of doing this in CSS currently, but CSS4 Text has just added text-wrap: balance to the draft specification which does exactly what my question asked for. I’ll leave this as the answer for the glorious future where this is supported.
http://dev.w3.org/csswg/css-text-4/#text-wrap
That should work:
div {
overflow: hidden;
max-width: 165px; // define max width of the text
height: 30px; // define height of the text based on font size and line height
line-height: 1.4;
font-size: 11px;
}
Plus to make it fancy you can try to add ellipsis (...) to the end of the bottom line:
div {
overflow: hidden;
max-width: 165px; // define max width of the text
height: 30px; // define height of the text based on font size and line height
line-height: 1.4;
font-size: 11px;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
There's a billion of tutorials, but none have worked for me unfortunately.
I need some artistnames to be in the header, centered, but with a css ellipsis, so very long names gets the "..." and will be truncated.
You can see the design here: http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php
Remember to resize your browser window.
Its meant for mobiles, so I cannot have any fixed withs and it should work with all kinds of mobile screensizes. I can make the ellipsis work, but then the text is no longer centered.
Any clue on how to do this best? I would really like to avoid any javascript as performance is highly important.
You need to update the rules for h1 with overflow & text-overflow.
.header h1, .headerwhite h1 {
font-size: 15px;
line-height: 49px;
text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
overflow: hidden;/* triggers text-oveflow and mids floatting elements */
white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}
basicly same answer as dartanian300 :)
You may control the max-width of h1 too and add a margin:auto; : demo
UPDATE
Using display: inline-block simply removes the h1 altogether on smaller screens. You should avoid this.
Also, technically, the text is still centered. It takes into account the ellipsis when centering the text.
ORIGINAL ANSWER
In order for the ellipsis styling to work, you've got to set a few things on the element with the text:
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block ensures that the box you're trying to generate ellipsis on is shown as a block. If it's not, it won't know where the bounding box is.
text-overflow: ellipsis obviously should generate the ellipsis.
overflow: hidden for some reason, browsers won't generate the ellipsis unless you have this. I believe it has to do with the fact that the text will just flow outside the box with it.
white-space: nowrap this prevents your text from wrapping onto multiple lines. That way, you have one line with ellipsis at the end.
That work?
I have a table where th <td> are styled as follows.
table.tvTable td{
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap; // with this line i get one erally wide row
padding: 3px;
}
Individually, they are styles with width (both in px, % and *). I also tried to set the width of the whole table too (which don't want to do beccause i want one of the columns to utilize maximum width available on the screen).
However, no clipping occures, let alone ellipsisation. I'm on Ch and FF.
Here's a demo of how I got it working. You indeed have to use table-layout: fixed as was mentioned. Setting the width of the td via CSS seems to work, as well, without having to specify it in the HTML.
Please let me know if you have any questions!
Unfortunately you have to use table-layout: fixed; AND set your table a width.