I was wondering if the following structure is possible.
Here I have a div of fixed width and height (the outer box). I made it to have fixed width and height because it's a list item and I want them to be uniform. Now, I'm having a problem with the Description area. I want it to have text that will wrap into multiple lines, and if it doesn't fit, it would show an ellipses. Now I'm planning to set the font-size and line-height strictly as to maybe show 2 lines of text in the Description div. Is this correct? I'm worried that the rendering will be messed up on some browsers and the design might be very fragile. I'm also a bit unsure on how to implement the ellipses using CSS-only solution. I've tried the text-overflow: ellipsis but couldn't quite get it to work.
To be honest, I'm still not sure if I'm on the right path. I'm thinking there might already be an existing/better solution for this structure. Is anyone else doing this? Any help would be very much appreciated. Thanks.
Here's the JsFiddle link:
http://jsfiddle.net/3kJWQ/4/
This seems to work:
.description {
height: 60px;
font-size: 14px;
line-height: 21px;
overflow: hidden;
border: 1px solid #000;
text-overflow: ellipsis;
white-space: nowrap;
}
From: http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/
text-overflow: ellipsis comes into play only when:
The box has overflow other than visible.
The box has white-space: nowrap.
I got the solution from this question:
Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?
I chose to use the plugin jQuery dotdotdot.
Related
It's hard to explain the issue, as this seems more like a cross-browser bug than it does a feature. Follow the steps here to see the issue:
Steps to reproduce:
Run code snippet.
Click in textbox.
Repeatedly press right-arrow key until text cursor passes edge of box.
At this point the box will start 'scrolling' (in spite of the overflow: hidden). The grey background element that should fill the box 'slides' left, and to the right of it the white background behind can then be seen.
Desired behavior:
When going out of box, the text cursor simply escapes view, and the box scroll position does not slide to compensate.
How can I disable this 'no scrollbar' scrolling effect? (Note, it is in fact scrolling, because the js scrollLeft value of the overflow-box actually changes, even without a scrollbar.)
A CSS solution would really be ideal (e.g., a working overflow: hidden), but a Javascript solution could still suffice.
.overflow-box {
margin: 20px;
position: relative;
width: 64px;
height: 64px;
overflow: hidden;
border: 1px solid black;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background-color: #a0a0a0;
}
.textbox {
position: relative;
margin: 20px;
width: 200px;
}
<div class="overflow-box">
<div class="background"></div>
<input type="text" value="aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo" class="textbox"/>
</div>
I apologize if this question is a duplicate. I cannot find a similar question since I don't know what the effect is called..
TIA!
Ok, so I discovered two things:
The issue only occurs on elements with overflow: hidden
When 'scrolling', the box emits the scroll event when changing, allowing one to do the following to prevent the scrolling:
document.querySelector('.overflow-box').addEventListener('scroll', evt => {
evt.target.scrollTop = 0;
evt.target.scrollLeft = 0;
});
Since I have a specific container that needs to prevent scroll, I'm using CSS to set overflow: hidden on it to trigger the issue on the container and not a parent element, and then I'm applying the JS above to prevent the scrolling.
This seems to be the best solution in my case.
If anyone knows of a simpler CSS solution, I will accept that answer over this one.
I am not sure if this what did you asking about:
if you need to solve problem of hidden content you only need to resize width at first and last selector
if you need to make text with scroll you can change type into text area and then defining rows and cols attribute, this should manage that.
If all of this does not help please add some picture of the expected result you need to make it clear.
I am using HINT.css for tool-tipping, and I can't for the love of god get the tooltip to expand with the content. I've tried clear fixing, setting heights and what not, but to no avail. Basically I would like to be able to say:
&:after
content: attr(data-hint)
background: $defaultColor
color: white
padding: $verticalPadding $horizontalPadding
font-size: $fontSize
line-height: $fontSize // Vertical centering.
width: 150px
min-height: 10px
and then the div will just expand along with the content (basically trying to prevent out-of-bounds cases)
<div class="hint" data-hint="Some very very very very very long tooltip going past 150px and should be multilined"></div>
In the CSS file of the plugin, add the following two CSS properties to .hint class after pseudo element.
.hint:after
{
width: 150px;
white-space: pre-wrap;
word-wrap: break-word;
}
You have set a fixed width of 150px. Try using no width or if you need a minimum, use min-width.
I found the issue which was related to very domain specific code that interlaced with the way hint.css is structured. I had to rewrite hint.css to a custom solution to make it work.
I've got the following layout:
<article>
<h3><a>...</a></h3>
<h3><a>...</a></h3>
</article>
The first header has dynamic content, the second has a fixed width set.
I'd like the headers to be inline, and when the content of the first one grows, for it to stretch until the sum of both headers' widths is 100%, and then for overflow text to be ellipsis.
I've been running into the problem of once I make the first div inline or float, its width no longer stays contained by the parent, making text overflow everywhere, or with overflow set to hidden, I can't get the second header to be positioned on the same line with it.
P.S.: Unfortunately this will need to support as many old browsers as possible, back to I.E. 6 would be the best (/barf) but whichever solution reaches as far back as possible will be the most valuable. Thanks you!
If I understood the question right, it's easily achievable with flexible boxes:
article {
display: inline-flex;
width: 100%;
}
article > h3:nth-child(1) {
flex: 1;
}
article > h3:nth-child(2) {
flex: 0 0 150px;
}
a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
JSBin.
If I'm understanding the issue properly, the following JSFiddle may have the solution:
http://jsfiddle.net/modenadude/QntUm/2/
The code:
keeps the two <h2>s inline
if the width of the first <h2> gets wider than the width of the second <h2> + <article>'s width, it adds the ellipses to the first <h2>
I set max-width on the <h2>s (to 50%) just in case, and added outline to show the widths clearly.
I used jQuery to figure out the widths of the <h2>s onload, but the same can be done with pure JS by using getElementByID (I can set that up too if you'd like). And of course it was designed to be used on only two <h2>s and one <article> so simple editing could make it more expandable.
I have a responsive webpage where text is loaded from a database.
<p style="width: 95%; font-size:13px; padding-right:20px; color:#babec5; margin-top: 3px;">
Just 7 days left ... Bob, Father's Day is only one week away, s...</p>
There is more text after the '...'. The p element has two lines vertically and I would like to be able to clip off any content but still fill up the <p> if the size of the page changes.
you can use css overflow: hidden;, this will cut off the text.
If you want to have three dots at teh end, you can also use text-overflow: ellipsis; most modern browsers support that.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow?redirectlocale=en-US&redirectslug=CSS%2Ftext-overflow
in order for it to work however you need a fixed height or max-height
I'd just set the style to include overflow:hidden
e.g.
p
{
width: 95%;
height: 20px;
overflow: hidden;
}
here's a jsfiddle so you can see the effect (change bottom right panels size to see it in action)
http://jsfiddle.net/mdXCH/
Are you looking for this kind of css rules: http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props
I've got some text that is roughly 20 lines. Most lines are short, but some are long. The text is inside a column and the page has two columns. The problem is that long lines are causing interacting badly with the float. Instead of to columns, I get one column stacked on top of the other.
I googled around and I think I should be able to use word-wrap, but adding it to my css does nothing. What am I missing?
Here's css.
.two{
float: right;
width: 45%;
margin-right: 2.5%;
margin-left: 2.5%;
word-wrap: break-word;
}
If there's a better way to do this, I'm all ears.
Edit: Here's a jsfiddle link.
Your footer is set at 100% width, thats fine but you have a 2px border on it. This brings the elements total width over 100% and such it will create a scrollbar, change width to 98%/99% or the exact amount of pixels and it should work (or just remove the border)
This was an issue that only appeared in Chrome.
I found this post, which gave me the solution: http://ryan.stawarz.com/tech-tidbits/chrome-table-cells-not-word-wrapping-correctly/
I added these line to my the appropriate section of my CSS file and all was fixed.
table-layout: fixed;
word-wrap: break-word;