CODEWITHSUNDEEP
htmlcss
Erma
Erma

Reputation: 387

CSS: Span tag in same line

I have an h4 tag, inside which i have 4 spans and length of text bind to each span tag varies(width of span tag varies). How can i make the span tags appear in same line irrespective of the width?

<h4>
  <span class="spanclass">text 1</span>
  <span style="white-space: pre-wrap !important">:</span>
  <span class="spanclass">text 3</span>
  <span class="fa fa-pencil"></span>
</h4>

.spanclass {
  white-space: pre-wrap !important;
  display: inline-flex!important;
  word-wrap: break-word;
  word-break: break-all;
}

Please help, Thanks.

Upvotes: 1

Views: 3755

Answers (3)

user2172603
user2172603

Reputation: 31

    h4 span .spanclass {
      float:left;
    }

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You just need to set white-space: nowrap with overflow: hidden on header element:

h4 {
    white-space: nowrap;
    overflow: hidden;
}

Demo: http://jsfiddle.net/z83wjao9/4/

Upvotes: 2

Dipali Vasani
Dipali Vasani

Reputation: 2536

add min-width to h4 tag : 

h4{
  min-width: 100px;
}

DEMO

or you can do like this for responsive design with wrapping : http://jsfiddle.net/z83wjao9/2/

without wrapping : http://jsfiddle.net/z83wjao9/3/

Upvotes: 0

Related Questions