Html - How do I make the line break after the span tag closes?

Praanto
August 14, 2023
225 views
0 votes
2 Answers

I want to achieve something of the following kind of UI

I have tried the following

p {
  max-width: 30ch;
}

p span {
  border: 1px;
  border-style: solid;
  border-color: black;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-left: 0.5rem;
  border-radius: 999px;
}

<p>
  <em>
        Frameworks used:
    </em>

  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
</p>

but I end up with something looking like

Is there any way with pure CSS (or with JS if the prior not possible) to achieve a line break only after the span tag closes?

Tags: css html

Answers

Simply add white-space: nowrap; to the p span rule.
Also, since p span is a too common general selector, I suggest you add a class to those SPANs and use that class in CSS like i.e:

.pill {
  white-space: nowrap;
  /* ...other styles */
}

or on the parent element: .pills span {.
For the parent element I’d also suggest using CSS flex like:

/*QuickReset*/ * {margin: 0; box-sizing: border-box; }

body {
  font: 16px/1.4 sans-serif;
  background: #ea526f;
}

.pills {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem;
}

.pills span {
  white-space: nowrap;
  border: 1px solid black;
  font-size: 0.875rem; 
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
}

<div class="pills">
  <b>Technologies:</b><span>C</span><span>C++</span><span>C#</span><span>Java</span><span>Python</span><span>SQL</span><span>Typescript</span><span>xCode</span><span>Javascript</span><span>Unity 3D Engine</span><span>Elixir</span><span>Erlang</span><span>Prolog</span><span>MIPS Assembly HTML</span><span>Clojure</span><span>CSS</span><span>Jira</span><span>React</span><span>Vue</span><span>Ruby on Rails</span><span>NextJS</span><span>Visual Studio Code</span><span>Git</span><span>React Native</span><span>Visual Studio</span><span>MVP</span><span>MVVM</span><span>MySQL</span><span>Node.js</span><span>IJX</span><span>Design</span><span>Continous Integration</span><span>CMake</span><span>BigQuery</span><span>Kibana</span><span>Framer Motion</span><span>Ul Design</span><span>MariaDB</span><span>Flask</span><span>Github Actions</span><span>Kotlin</span><span>IntelliJ</span><span>Rider</span><span>CLion</span>
</div>

See if display:inline-block can be a quick solution along with some margin bottom from your current setup.

 display:inline-block;
  margin-bottom:0.5rem;

https://codepen.io/emmeiWhite/pen/GRwVdwm

CSS Updated:

p {
    max-width: 30ch;
}

p span {
    display:inline-block;
    margin-bottom:0.5rem;
    border: 1px;
    border-style: solid;
    border-color: black;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    align-items: center;
    font-size: 0.875rem; 
    line-height: 1.25rem;
    margin-left: 0.5rem;
    border-radius: 999px;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I make the line break after the span tag closes?

Answers