CODEWITHSUNDEEP
htmlcss
user1400915
user1400915

Reputation: 1943

wrapping the text in span element in css

I have a span element which is getting displayed as greater than its parent span's width and the text is not displaying in the next line .

The following is the code and I tried giving word-wrap:break-word; but still no luck :

  <span style="position: absolute;width:250px;font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size: 9px;white-space: nowrap;color: rgb(51, 51, 51);margin-left: 0px;margin-top: 0px;left: 8px;top: 8px;/* display: block; */" zindex="1">

   <span style="width:100%;word-wrap:break-word;display:block">Specific Topic Discussion vs. Taken Matrix Temp:<strong> 473.761169</strong></span>
  </span>

For the parent span , the width is 250px , and I need the inner element to occupy the complete parent's width , and wrap the text in the next line .

If I give parent width as 50px , the inner span text should be ideally occupy over four lines . But that is not happening and width of inner span is always fixed .

How to wrap it to next line?

Upvotes: 1

Views: 11333

Answers (3)

Poorya Hosseini
Poorya Hosseini

Reputation: 222

You need to remove white-space: nowrap; in the first <span>

Upvotes: 0

Ashiqur Rahman
Ashiqur Rahman

Reputation: 31

The white-space: nowrap property of parent is forcing the child span to stay in a single line. You can either remove the nowrap property or add a white-space property to the child element to overwrite parent.

JSFiddle: https://jsfiddle.net/96vfagrb/

Upvotes: 2

Nope
Nope

Reputation: 22339

How to wrap it to next line?

To wrap the text to the next line remove the white-space from the outer span.

 <span style="position: absolute;width:250px;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;font-size: 9px;color: rgb(51, 51, 51);margin-left: 0px;margin-top: 0px;left: 8px;top: 8px;/* display: block; */" zindex="1">
    <span style="width:100%;word-wrap:break-word;display:block">Specific Topic Discussion vs. Taken Matrix Temp:<strong> 473.761169</strong></span>
</span>

Upvotes: 3

Related Questions