CODEWITHSUNDEEP
semantic-uifomantic-ui
G. Marc
G. Marc

Reputation: 6037

Semantic-UI/Fomantic-UI: How to add a linebreak to a list item

I'm using Fomantic-UI (Semantic-UI). I have a list with items that consist of an avatar, a text and a button. When the text is to wide to fit on one line, it should wrap to a second line. But instead, the whole line wraps to a new line under the avatar and the button. See the fiddle below:

https://jsfiddle.net/j2pguvko/8/

<body>
  <div class="ui list" style="width: 140px">
    <div class="item">
      <a class="right floated content">
        <i class="trash icon"></i>
      </a>
      <img class="ui avatar image">
      <div class="content">
        Blabla blabla      
      </div>
    </div>
  </div>
</body>

How can I make the text wrap?

Upvotes: 1

Views: 374

Answers (1)

Jonas
Jonas

Reputation: 1529

Something like this?

Justify the text, and make the image float.:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
  <style> 
        img { 
            float: left;  
            margin: 5px; 
        } 
        p { 
            text-align: justify;  
        } 
    </style> 
</head>

<body>
  <div class="ui list" style="width: 140px">
    <div class="item">
      <a class="right floated content">
        <i class="trash icon"></i>
      </a>
      <img class="ui avatar image">
      <p>
        Blabla blabla asjd aejhfk jihas wknik kjanwk nlsajn 
      </p>  
    </div>
  </div>
</body>

Upvotes: 0

Related Questions