Tips for aligning buttons in a row

Question

Tips for aligning buttons in a row

I am trying to find a way to make my buttons more compact within a <div> element when the length exceeds 100%. Is there a way to achieve this while avoiding wrapping to a second line?

Is there a solution similar to using scaleX, but one that takes into account the width of all available buttons?

Sample Code:

<div class="something">
  <button>some text</button>
  <button>some other text</button>
  <button>another example</button>
</div>

Example: http://jsfiddle.net/BRNKt/ I am aiming to densify the buttons (text font) in order to keep them all on a single line within the original div width.

button html css

Answer 1

Answer №1

To condense the appearance, consider including button { padding: 0 }. For further adjustments, try adding

.something { word-spacing: -0.3em }; button { word-spacing: 0 }

.

As for altering font size based on width availability, it may pose accessibility issues and browser limitations. Fonts cannot always be reduced below a certain threshold set by the browser.

If breaking lines within buttons is acceptable, you can control button width and text wrapping with this method:

button { padding: 0; max-width: 14%; float: left; }

Alternatively, you can manually insert line breaks into the buttons like so:

<button>some<br>text</button>
<button>some<br>other<br>text</button>

Answer 2

To condense the appearance, consider including button { padding: 0 }. For further adjustments, try adding

.something { word-spacing: -0.3em }; button { word-spacing: 0 }

.

As for altering font size based on width availability, it may pose accessibility issues and browser limitations. Fonts cannot always be reduced below a certain threshold set by the browser.

If breaking lines within buttons is acceptable, you can control button width and text wrapping with this method:

button { padding: 0; max-width: 14%; float: left; }

Alternatively, you can manually insert line breaks into the buttons like so:

<button>some<br>text</button>
<button>some<br>other<br>text</button>

Answer 3

Answer №2

.another-class,
.another-class button {
    text-overflow: ellipsis;
}

Answer 4

.another-class,
.another-class button {
    text-overflow: ellipsis;
}

Tips for aligning buttons in a row

Answer №1

Answer №2

Similar questions

Finding your way to a <div data-role="page"> sans the use of an anchor tag

Adjacent components

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Adding a line break in a Buefy tooltip

Having trouble customizing the appearance of wtform attributes

Using multiple foreach loops within each other

What is the best way to eliminate the log of the Internet Explorer web driver?

Tips on positioning a dropdown item to the far right of the page

JavaScript code that uses jQuery does not function properly on an HTML form

Next.JS CSS modules are experiencing issues with functionality

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Creating an inner shadow effect for geometric shapes with text inside - a step-by-step guide!

Is it possible to achieve Bootstrap 3-style for the mobile navbar menu in Bootstrap 4?

Change the class of an element only within the div that is directly below it

Angular default route with parameters

Using jQuery UI Dialog to delay the appearance of content after :after in IE8

Maximize the performance of displaying images

Tips on utilizing jquery slideDown alongside appendTo

Customize the size of innerWidth and innerHeight in your THREEjs project

Import HTML file into email message