I'm absolutely positioning text on top of images and would like to truncate the text if it expands over the image. This wouldn't be a problem if the width of the text was defined. However, the text block over the image is set to 100% and is positioned to the bottom of the image.
How do I hide the text if it expands pass the image?
Check out my example:
http://jsfiddle.net/qhFUL/
Set overflow to hidden:
.box {
overflow: hidden;
}
Demo: http://jsfiddle.net/qhFUL/1/
If you want to prevent the text from wrapping as well (so it doesn't hide the image) you can do this:
.box {
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.text {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
white-space: nowrap;
}
Which will truncate long text instead of wrapping.
You could also specify a height on the .text div so it will truncate and not wrap.
You could then add a little jQuery ellipsis script to pretty it up a bit...
http://yue.st/notes/code/js/ellipsis.en.html
or
https://github.com/rmorse/AutoEllipsis
nice... :)
Related
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
Here is the JSFiddle I'm trying to do: JSFiddle Example
It is responsive, and in a large width, it is exactly what I want, like this:
But in small sizes, It overlaps the another text and/or breaks the lines, like this:
and this:
And this is my css to the texts:
.giro-nome {
position: absolute;
top: 25%;
}
.giro-percentual {
position: absolute;
right: 0;
top: 25%;
font-weight: 700;
}
I wanted just to stop the text in a single line, something like this(expected, not real):
Is it possible? Probably not with absolute, like I'm doing, but I have no idea another way to do it.
Thank you advanced.
text-overflow: ellipsis; is what you're looking for.
8.2. Overflow Ellipsis: the ‘text-overflow’ property
This property specifies rendering when inline content overflows its
block container element ("the block") in its inline progression
direction that has ‘overflow’ other than ‘visible’. Text can overflow
for example when it is prevented from wrapping (e.g. due to
‘white-space:nowrap’ or a single word is too long to fit). Values have
the following meanings:
ellipsis Render an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more
language/script-appropriate ellipsis character, or three dots "..." if
the ellipsis character is unavailable.
However you should specify the width of the absolutely positioned element at first. Either by left/right properties, or by other approaches such as width: 90% or width: calc(100% - 80px):
EXAMPLE HERE
.giro-nome {
position: absolute;
top: 25%;
left: 0; right: 80px; /* Equal to > width: calc(100% - 80px) */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Apply the below css properties this will truncate your overflow text and append the three dots.
.giro-nome {
position: absolute;
top: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I'm working on a header that's intended to overflow. It's got white-space: nowrap rule applied in order to prevent breaking the text into two or more lines.
The problem is, the viewport now stretches to fit the text and then the page is scrollable on the x-axis. Applying overflow-x: hidden hides the scrollbar, but it's still possible to scroll the page on mobile, and on desktop through middle mouse button drag.
I know I could use position: fixed, but that's not a solution for me. I want the header to stay where it is.
Here's a fiddle with all my attempts so far.
Ok, try applying this:
CSS:
.wrapper {
position: absolute;
width: 98%;
overflow: hidden;
}
.text {
font-size: 500%;
white-space: nowrap;
display: block;
width: 100%;
float: left;
}
edit: oh, and remove overflow-x: hidden; from html,body
We are using the twitter bootstrap thumbnails.
We are adding a description underneath the same as in the bootstrap documentation.
The difference is that we don't have a size specified (the documentation uses .span4) on our thumbnails, instead the content sizes them.
This works great, except we want one difference, we don't want a long caption to extend the thumbnail, instead we want the extra caption length to be be hidden.
This would be easy if we were using fixed width's but since we are not I have no idea how to do this;
Here is a jsfiddle playground: http://jsfiddle.net/BbCQK/
I thought maybe I could just do:
.caption {
max-width: 100%;
text-overflow: ellipses;
}
But that doesn't work, it just stretches the container anyway, so how can I do this?
Got it :)
Absolute positioning to the rescue: http://jsfiddle.net/BbCQK/4/
a.thumbnail {
padding - bottom: 30px;
position: relative;
}.thumbnail.caption {
overflow: hidden;
white - space: nowrap;
position: absolute;
padding: 0;
bottom: 4px;
left: 4px;
right: 4px;
text - overflow: ellipsis;
}
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>