I'm trying to create a table-like-display containing 2 columns using div elements. One column is for an image URL while the other is for the file size. The file size column has a fixed width of 150px and the URL column should fill the remaining space. If there is insufficient space for the URL it should cut off and display an ellipsis. However what happens is the text just continues to the next line. I've also tried setting white-space: nowrap; but that causes the whole div to break onto a new line.
My HTML code look like this.
<div id="container>
<div class="row">
<div class="imageURL">http://mywebsite.com/image1.jpg</div>
<div class="fileSize">586 KB</div>
</div>
<div class="row">
<div class="imageURL">http://mywebsite.com/image2.jpg</div>
<div class="fileSize">785 KB</div>
</div>
<div class="row">
<div class="imageURL">http://mywebsite.com/image3.jpg</div>
<div class="fileSize">258 KB</div>
</div>
</div>
And here is the CSS.
#container {
width: 100%;
}
.row {
padding: 5px;
}
.imageURL {
display: inline;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.fileSize {
display: inline-block;
width: 150px;
float: right;
}
I think you are looking for something more like this in the following JSFIDDLE. I have rearranged your CSS to look like the following:
#container {
width: 100%;
}
.imageURL {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
width:auto;
min-width:100px;
max-width:65%;
white-space:nowrap;
}
.fileSize {
display: inline-block;
margin-left: 100px;
}
.row {
overflow: hidden;
white-space:nowrap;
}
Mainly, I have added the white-space nowrap property along with keeping both divs on the same line, I took out the float, which had made it a block level element, and just placed a margin to be a specific amount from it. The key comes from the width in the .imageURL class, where I added an auto width, a min width, and a max width, which allows the ellipsis to take place at certain points.
Change .imageURL to the following:
.imageURL {
white-space: nowrap;
text-overflow: ellipsis;
width: 400px;
display: block;
overflow: hidden
}
Hope This Helps!;)
JSFiddle Example
Related
I have two divs, they should be displayed on same line.
Div one is dynamic width, user typed text.
Div two is date, which is placed on right side.
When there's not enough width (mobile phone) I want the user typed text that doesn't fit the screen width to be overflowed.
I tried the following but max-width is not working here, as it only overflows text till some point:
.parent {
display: table;
width: 100%;
}
.dynamic {
display: inline-block;
max-width: 80%;
}
.fixed {
display: table-cell;
width: 75px;
}
.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="parent">
<div class="dynamic cutting-text">
could be very long text. overflows till max-width reached, so doesn't work for small screens
</div>
<div class="fixed">
30.11.16
</div>
</div>
How to achieve this for arbitrary text?
JSFiddle as well
Use CSS Flexbox. Its quite easy to implement it in flexbox. Make your .parent a flex container and apply flex properties to .dynamic { flex: 1; }. Everything will get in place automatically.
Have a look at the snippet below:
.parent {
display: flex;
width: 100%;
}
.dynamic {
flex: 1;
}
.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="parent">
<div class="dynamic cutting-text">
could be very long text. overflows till max-width reached, so doesn't work for small screens
</div>
<div class="fixed">
30.11.16
</div>
</div>
Hope this helps!
Take a look at the Updated Fiddle
Changes:
.fixed {
width: 70px;
right: 0;
position: absolute;
}
.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.dynamic {
max-width: 80%;
}
.parent {
display: flex;
width: 100%;
}
I'd like to create a table like div structure, which is placed in a container, can be scrolled horizontally and gets not breaked. I wrote the structure, but when the content gets longer than the container it puts the rest of the content in a new line.
Here's my code so far:
http://jsfiddle.net/rcdzdyv7/2/
where all of these elements represent a "table" row:
<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>
My goal is to make these rows one-lined and look like if it was a table. How could I solve this?
You can't use float:left because when content reach the width there's no way to avoid the floating elements "jumping" to next line (without changing the html structure).
However you can use display:inline-blockbecuase your elements this way can change their behaviour with the property white-space:nowrap.
Basically:
.container {
width: 500px;
overflow-x: scroll;
}
.header {
width: auto;
display:inline-block;
background-color: #D9D9D9;
white-space: nowrap;
clear: both;
}
.body {
display:inline-block;
margin: 5px 0;
}
.body-row {
background-color: #E5EBFF;
display:inline-block;
clear: both;
white-space: nowrap;
}
.footer {
clear: both;
background-color: #D9D9D9;
white-space: nowrap;
}
.row-title {
width: 300px;
display:inline-block;
}
.row-content {
width: 150px;
display:inline-block;
}
.value {
width: 100%;
}
as in this FIDDLE
You could use:
.row-content {
width: 150px;
display: inline-block;
}
instead of:
.row-content {
width: 150px;
float: left;
}
Let me know if it works!
this is because you are using DIV with delimited width no set height.
so when the width needed will be too high for the container width it will automatically do under. Hope this makes sense. A soluation can be to use inline-block, personnally I would recomment to use a classic table but just my opinion
try these css properties to the <div> for which you want a scroll
div {
overflow-x: scroll;
overflow-y: hidden;
}
hope this is what you want !
I have the following container of text:
<div class="cardTitles">
<div class="title">
<div class="titleContent">
<i class="fa fa-star-o"></i>
<b>Some long long long title here</b>
</div>
</div>
... title divs ...
</div>
css:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
I want to make text full width + text-overflow: ellipsis. So when I resize browser all title divs should be full 100% width of the parent cardTitles with cut text to three dots at the end.
I found that this is possible using flex. Here is the possible answer:
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.
You can find an example here: http://88.198.106.150/tips/cpp/
Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.
Try this out:
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's and updated jsFiddle
No Flex but could work also ... try it.
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow ellipsis with 100% width
The width needs to be added in pixels, percentage wont work along with other three properties as given below:-
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
This div uses "text-overflow:clip":
This is some long text that will not fit in the box
This div uses "text-overflow:ellipsis":
This is some long text that will not fit in the box
I want to have two divs in a single row with the left div's text getting clipped based on the right div's width(the text in the div is dynamically generated) hence we cannot fix the widths of these divs(the text in the right div must be completely visible whereas the text in the left div can be clipped).This image shows the sample output:
here is the fiddle:
http://jsfiddle.net/UzqLZ/1/
here is the html part of code:
<div class="parent">
<div class="text">This text must be hidden if it is overflowing</div>
<div class="number">88818888.333346</div>
</div>
Can someone help me with this.
How does this look: http://jsfiddle.net/P6Nbg/
I've given the parent position relative and a background colour of white for the number div so it hides the text below.
.parent {
width: 30%;
position: relative;
overflow: hidden;
}
.number {
display: inline-block;
position: relative;
background-color: white;
float:right;
}
.text {
display: inline-block;
position: absolute;
background-color: transparent;
white-space:no-wrap;
overflow:hidden;
float:right;
}
Here is one way of doing it.
You need to add an inner wrapper element around your text as follows:
<div class="parent">
<div class="text">
<div class="inner">This text must be hidden if
it is overflowing</div>
</div>
<div class="number">88818888.333346</div>
</div>
Now use the following CSS:
.parent {
display: table;
width: 30%;
border: 1px dotted blue;
font-size: 1.00em;
line-height: 1.50em;
}
.number {
display: table-cell;
border: 1px dotted blue;
}
.text {
display: table-cell;
}
.inner {
height: 1.50em;
overflow: hidden;
word-break: break-all;
}
Apply display: table to .parent and specify the font-size and line-height.
Apply display: table-cell to .number and .text.
The .inner block will fill up the rest of the width not taken up by .number,
and the text will wrap onto two or more lines. If you specify the height to be one line, then you can use overflow: hidden to hide the extra text.
Using word-break: break-all may be a good idea.
See demo at: http://jsfiddle.net/audetwebdesign/QBQVg/
So I want something like this:
Hello [element]
but also this case:
Hello blahblahblah... [element]
floating the element right does this, which I do not want:
Hello [element]
Hello blahblahblah... [element]
EDIT:
the html I tried was this:
<h3 id="container">
<span>[element]</span>
<a>dynamic text</a>
</h3>
css:
span{
float: right;
}
#container {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Another problem is [element] could be of variable length. I want to truncate the a tag so that it fits all of [element] and put it all on one line. I know that might've just made the question much harder...
EDIT 2:
Realized it wasn't clear that I want the container h3 to be of fixed max width. So basically if the a tag and span's combined width is greater than that max width, the span will put the truncation location to the left. Like so:
the string is: Hello World
So it could look like this in that case:
Hello Worl...[small el]
Hell...[bigger span el]
Ideas?
Updated Idea
This is a refined version of my original idea below, but attempts to create your fixed width of container and general look that you mentioned in the chat using an extra wrapping div. The only way I see that this could work purely by css is for you to know before hand what your maximum width of your "badge" area could be, and then set your max-width of the text area to be the width of the container minus that potential maximum width of the badge area. Here is the revised code below and fiddle example, where I am assuming a 200px container, with a maximum of 100px badge area width. You will end up with some of the text being cut off "prematurely" (as in, it would appear that it could go wider, but we are limiting it to a certain space; see the third line in the fiddle).
HTML
<h3 class="container">
<div>
<span>[elem]</span>
<a>dynamic text</a>
</div>
</h3>
CSS
.container {
width: 200px; /* this defines your right edge */
background-color: cyan;
overflow: hidden;
}
.container > div {
float: left;
clear: left;
position: relative;
padding-right: .1em;
white-space: nowrap;
}
.container span {
position: absolute;
left: 100%;
white-space: nowrap;
}
.container a {
display: block;
/* the following assumes the span "badge" area is 100px max,
so it is 200px - 100px = 100px in width */
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Original Idea
Perhaps this would work.
.container {
float: left; /* this collapses the container around the 'a' tag */
position: relative; /* this is going to position the 'span' */
padding-right: .1em; /* gap to element 'span' */
white-space: nowrap;
}
.container span {
position: absolute;
left: 100%; /* push behind 'a' tag */
white-space: nowrap; /* keep this from wrapping */
}
.container a {
display: block;
max-width: 100px; /* set your max width for the 'a' tag only */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
See a fiddle example.