How to style

Question

Given the following snippet:

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>

How would I make it so that the second block with <button> as a wrapper looks identical to the one with <a> as a wrapper?

I'm trying to make a in-text button to open a modal and problem occurs when the text wraps to a newline. Sure I can just use <a> but that wouldn't be semantically accurate.

Setting white-space: nowrap is not an option.

I would think display: inline would've solved it but are there any internal browser styles that I'm missing?

This needs to be IE10 compatible so I can't use display: content or unset: all.

short answer: this is impossible, you cannot make button wrap across multiple lines — Temani Afif, Oct 09 '19 at 09:57
@TemaniAfif I investigated your claim and it seems you're right: https://html.spec.whatwg.org/multipage/rendering.html#button-layout — paneko, Oct 09 '19 at 10:29
@paneko - The strange rules are required to allow for backward compatibility with web pages written when button was a replaced, inline element. (The HTML button element is older than display:inline-block) — Alohci, Oct 09 '19 at 10:38

score 0 · Answer 1 · answered Oct 09 '19 at 07:10

Like this?

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>

Bourbia Brahim · Answer 2 · 2019-10-09T08:12:11.790

0

add to your button ( setting width to 0 and background transparent + set same div line height)

  width: 0;
  background:transparent;
  line-height: 1.5;

also change the red baground to button span selector not button selector

div {
  width: 100px;
  line-height: 1.5;
}

a,
button span {
  background: red;
}

button {
  display: block;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  width: 0;
  background:transparent;
  line-height: 1.5;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text
  <br />
  <br />
  Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button>
  Some text
</div>

edited Oct 09 '19 at 08:12

answered Oct 09 '19 at 07:12

Bourbia Brahim

14,459
4
39
52

Hi thanks for the reply, but I updated my question shorty after posting it. I added some text before and after the button to better illustrate my use case. With width 0, the button overlaps with the text around it. – paneko Oct 09 '19 at 07:29
@paneko try to set button `display : block ` – Bourbia Brahim Oct 09 '19 at 08:17
the thing is I want the text inside the button to flow along with the rest of the paragraph like and not be its own block. – paneko Oct 09 '19 at 08:24

score 0 · Answer 3 · answered Oct 09 '19 at 08:07

0

I'd probably question why you think an a element here wouldn't be semantically accurate?

From MDN

The HTML element (or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

I would consider a modal a location within the same page. In fact, if you were to be talking about a PWA (Progressive web app) and general usability I would suggest that your modal have a specific URL, which makes an a even more relevant.

Finally, from a usability perspective, buttons should look like buttons (within limits). I would say disguising one as a link is worse than using an a.

answered Oct 09 '19 at 08:07

dougajmcdonald

19,231
12
56
89

For the design, it would be different for buttons and links. The example is just for the purpose of the question, but it requires the text in the button to flow along with the rest of the paragraph. Well maybe I can make the modal appear on hashchange instead... – paneko Oct 09 '19 at 09:48
Understood, you should be able to either fix the modal launch to as you say a hashlink, or better yet a specific URL / route. Worst case you could `.preventDefault()` on the `a` and bind to the click event, but this is a bit hacky imo. Having said that, sites like https://www.figma.com/ use this approach for their login modal. – dougajmcdonald Oct 09 '19 at 18:28

score 0 · Answer 4 · answered Oct 09 '19 at 08:15

0

See here: https://stackoverflow.com/a/1368286/12149235

A more effective version of the link above is:

button {
  background: none!important;
  border: none;
  padding: 0!important;
  text-decoration: underline;
  cursor: pointer;
}

answered Oct 09 '19 at 08:15

yosh

178
15

How to style to look like a ?

4 Answers4

How to style