I'm designing a responsive web app, and I'd like to encapsulate long text in the title with an ellipsis. How can I do this? It's a responsive page (no fixed-width)...
Here is an example
Can anyone help?
Edit:
I added a max-width and an ellipsis overflow like this:
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
But this won't work for me because the key here is responsiveness. I don't to target the max-width of the title specifically for iOS mobile browsers, I want the max-width to enlarge or reduce on all smart phones. Any suggestions?
Who knew that you could handle this in straight CSS? I was surprised, but check out the text-overflow property. One of the possible values is ellipsis! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
See the fiddle: http://jsfiddle.net/PdRqB/
You need to add three properties to the title:
.title {
width: 100px; /* Need to specify a width (can be any unit). overflow: hidden does nothing unless the width of .title is less than the width of the containing content */
overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
text-overflow: ellipsis; /* to do what you want. */
}
One cool part is, no media queries necessary. It is responsive already (try resizing the pane in the fiddle).
Update:
Just saw your update...
Your containing element's width can be set to a percentage, even 100%. Then, overflow: hidden and white-space: nowrap can do their magic on the child title element.
For some reason using text-overflow: ellipsis doesn't work unless you specify fixed width to the element or its parent.
Apply the below style to your text element and wrap that element in a container whose width is 100%.
{
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
Related
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.
I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled.
Is there any way to achieve this layout only using CSS?
The markup would be something like this:
<article>
<section>...</section>
<section>...</section>
<section>...</section>
<section>...</section>
</article>
Here a section would float left and adjust itself on the columns queue where better fit (and not bellow the baseline of the previous one, as simple float does).
It's possible using CSS columns. Here is a good explanation.
CSS:
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
HTML:
<div>
Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!
...and so on and so forth ad nauseum.
</div>
Also, I found this site by searching "CSS Masonry" on Google. It was the second result.
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/