Question 215482 in CSS Question posted in
Some basic documentation can be found here.

Css – How to prevent unnatural wrapping of text with multiply elements in HTML

How can I make the following text wrap in a natural way?

<li>
   200g &nbsp;
   <a href="LINK">
      Fullkornspasta
   </a>
   , spaghetti
</li>

This is how the text currently wraps.

enter image description here

This is how I would like the text to wrap. Se the "," is on the first line.

enter image description here

Tags:

2

Answers


  1. 0 
    div {
  resize: both;
  overflow: auto;
  background: #aaa;
}

.nowrap{
  white-space: nowrap
}
    <div>
  <li>
    200g &nbsp;
    <span class="nowrap">
      <a href="LINK">
        Fullkornspasta
      </a>,
    </span>
      spaghetti
   </li>
</div>

    so you wanted this result? I know it’s little hacky but I have no better solution for line breaks between elements.

    Login or Signup to reply.
  2. 0

    Using several lines for text inside an HTML element can cause undesired effects, such as spaces. So it is better to make it one line. Compare these:

    <li>
   200g &nbsp;
   <a href="LINK">
      Fullkornspasta
   </a>
   , spaghetti
</li>

<li>
   200g &nbsp;
   <a href="LINK">
      Fullkornspasta
   </a>, spaghetti
</li>

<li>
   200g &nbsp;
   <a href="LINK">Fullkornspasta</a>
   , spaghetti
</li>

<li>
   200g &nbsp;
   <a href="LINK">Fullkornspasta</a>, spaghetti
</li>


<li>200g &nbsp;<a href="LINK">Fullkornspasta</a>, spaghetti</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search