I have a button with a flexible width. I would like to let the text wrap to 2 lines to keep the button's width as small as possible. Below are some examples.
Short words should still be wrapped to 2 lines to keep the button width small:
My
Button
A long description should wrap to the smallest resulting width:
My button with
very long text
A long word should just stay on one line, and the button will be larger:
Abcdefghijklmnopqrstuvwxyz
I've only managed to make the button wrap if I give it a width, but I want the width to be flexible. Is that possible?
My last resort would be to parse the text with js and add a <br> element, but if a more elegant CSS solution exists I would prefer that.
Yeah you can do it like this:
index.html:
<button>
Hello world!
</button>
style.css
button {
width: min-content;
padding: 1rem 2rem;
}
index.html:
<button>
Hello world! #######################
</button>
Give it a min-width if you don't want it to be too small.
Related
I have a textfield and a button on the same row.
I would like the textfield to take up all available space, and the button to only take up space in relation to the text on the button.
Visually I can solve this by putting the button in column 12.
However this only works when the browser is in fullscreen, as resizing the browser shrinks the button.
Is there any way to stretch the textfield to fill all available space (as in picture 1) without putting the button in column 12, so that the button doesn't shrink when resizing the browser?
Yeah, you can do it, check the example
.wrapper
{
display: flex;
}
input {
flex: 1 1 auto;
}
<div class="wrapper">
<input />
<button>confirm</button>
</div>
While justify-content creates space between the elements, flex expands the elements so they take all the space. The flex: 1 1 auto is the great choice for the forms like here because it doesn't change the size of the button, but the input.
Here is deeper explanation if you need:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
and one more for even deeper understanding:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
In this codepen Vuetify demo, I'm using a two column layout. The first column has a <v-list> inside a green <v-alert>. If you click the "toggle text" button, the title of the first item in the list toggles between short and long.
When the text is long, it overflows the <v-alert> and runs into the adjacent column
How can I prevent this? I would ideally like the text to be truncated with ellipsis once it reaches the edge of the green <v-alert> or if that is not possible, for the text to wrap over multiple lines within the alert.
I've tried adding the following class to the text, but it doesn't prevent the overflow
.prevent-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
If you want the text to not over flow the green container, you need to set the overflow there.
<v-alert text color="success" class="prevent-overflow">
will be where you aim.
Just to be clear, overflow sets on the contained items, when you set an over flow to your div, what you mean is - I want whats inside of this div to act like this if it goes beyond it.
For the ellipsis you will need to set 2 things, 1 is on the title add text-over: ellipsis, no need in word wrap and all, it will just cause the text to go down, unless thats what you want.
Second thing is to set width to the div that holds the text directly.
In your case for a quick fix you can do for example:
.v-list-item__title {
width: 20px;
}
.prevent-overflow2 {
text-overflow: ellipsis;
}
I have a pretty complex single-page application for managing data. Among other things, it of course needs to be able to print that data. For the most part I have my hands around what does and doesn't actually work when printing from the browser, and the tricks you can play in CSS using the #page directive.
I hit a problem last week that I'm finding a bit mystifying, though. I'm trying to print data onto cardstock forms -- for example, printing name badges on cardstock that might be 2 columns by 4 rows per page. I'm trying to do this using fixed-side divs, where the div's CSS looks something like this:
.badge {
display: inline-block;
width: 3.5in;
height: 2.5in;
}
That displays fine on-screen, but when I go to print it, it is coming out with each badge on a separate line -- the divs don't seem to be inlining properly. Margins are minimal, so I don't think that's the issue.
I'm at a loss here. Does fixed-size inline-block not work when printing? I'm using Chrome, if that's relevant. I am hoping that's it's possible to make this work without, eg, resorting to generating the pages as PDF on the server.
This should work:
<style>
.container {
width: 7in; /* This guarantees there will be enough room for 2 badges side-by-side */
}
.badge {
box-sizing: border-box; /* You only need this if you add padding or borders */
display: inline-block;
width: 3.5in;
height: 2.5in;
}
</style>
<div class="container">
<div class="badge">
Badge 1
</div><div class="badge"> <!-- DO NOT put line breaks between the badge divs! -->
Badge 2
</div><div class="badge">
Badge 3
</div><div class="badge">
Badge 4
</div>
</div>
In short, the 7in wide container div guarantees you'll have enough width to fit two badges side-by-side. Also, there are no line breaks between the badge divs, because line breaks would turn into spaces, which would prevent the badges from fitting beside eachother. Finally, I added box-sizing: border-box to the badge CSS to ensure that the width won't exceed 3.5in if you add borders or padding.
The number of depends on your screen size.
so when the resolution of the screen change or the printed page has another size, The number of rows and columns.
so i suggest to you to use % as unit instead of in to re-size width and height or make an css style for each resolution. Or you can Use the HTML table tag.
Because the inline-block Just treats the element like other "inline elements" and allows the use of block properties. it does not precise how many column and row.
If the menuitem text is a big string, the menuitem becomes too wide and don't look much good.
For example
<div dojoType="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">
A Big String as Menu item. The menuitem looks ugly as it becomes too wide.
</div>
</div>
Is it possible to set a fixed width to the menuitem and the text wraps automatically ?
You could set a max-width and normal whitespace wrap on .dijitMenuItemLabel Setting them on .dijitMenuItem won't work.
.dijitMenuItemLabel {
max-width: 100px;
white-space: normal;
}
Since you said that long buttons are really ugly, i'm wondering how you feel about a menu that has buttons with different heights. I'm thinking that won't work as wel, but that's for you to decide.
I want to show the title of some books in the page. Some title are short that can be show just in one line, and some are very long that will wrap to 2 lines.
Is it possible to set different styles (say: color, or line-height) for the 2 cases, just using CSS?
E.g. if the title is in one line, set the color to green. But if it's too long or user resize the window into smaller one, that it displayed in 2 lines, set the color to yellow?
I think this is impossible only with CSS. You need to use JavaScript in order to count characters or words in a line.
Another solution would be to use pseudo-element ::first-line http://www.w3schools.com/cssref/sel_firstline.asp
But that doesn't allow to change the whole paragraph style, only the first line, while the rest will have the main css.
To change the color of a text string of a certain length, I think you will have to find a jquery or javascript solution.
To add space (line-height) between the titles is much simpler. If each title is wrapped (e.g. in a div, h2, li, p), you could adjust the line-hight and add padding or margin to the surrounding element.
CSS example:
p.title { font-size: 11px; line-height: 12px; padding-bottom: 15px; }
HTML example:
<p class="title">Title 1</p>
<p class="title">Title 2 is a longer title - on two lines</p>
<p class="title">Title 3 is short</p>
If you need to check if the string is longer than the container div's width there is a topic here