CODEWITHSUNDEEP
htmlcss
nidhi gupta
nidhi gupta

Reputation: 1

Another way of line break through css without using br?

<div class="HL_iconCont">
    <ul id="dates">
        <li>
            <a href="#HomeworkHelp">
                <div class="topicIconCont homework_1"><br />
                    Homework Help
                </div>
            </a>
        </li>
        <li>
            <a href="#Accounting">
                <div class="topicIconCont homework_2">Accounting<br />
                    Homework Help
                </div>
            </a>
        </li>
        <li>
            <a href="#Economics">
                <div class="topicIconCont homework_3"> Economics <br />
                    Homework Help 
                </div>
            </a>
        </li>
    </ul>
</div>

I have a <div> named topicIconCont which is repeating with its width:auto; in <li> tag. I have also used multiple class for every <li> tag as it includes different icon images. Now I want to break the sentence written in this <div> below the icon image, I can't use <br>, <span>, or <p> tag in between as the line will be coming directly from the database.

For example: Here in the code - 

Accounting<br />
                Homework Help

Is there any way to break the accounting without using <br> tag? Can I manage this through css? Although I tried word break property but it's still not working. I cannot fix its width also as it's repeating and the content may vary. Please suggest any alternative asap how can I fix this?

Regards,

Nidhi

Upvotes: 0

Views: 2255

Answers (3)

pardis kermanshahi
pardis kermanshahi

Reputation: 1

Use this property white-space: normal !important and appropriate width for div. You can’t break text in CSS without using one of the separator elements (span,div,..). Or you can use Javascript --- Using special character(@,*,..) at the end of text , finding it and break text.

Upvotes: 0

manuel-84
manuel-84

Reputation: 2938

have you tried this?

<p>Line1</p>
<p>Line2</p>

Upvotes: 0

Chris Heald
Chris Heald

Reputation: 62638

First, block levels elements like <div> are not valid inside of inline elements like <a>. Use a span or something similarly inline.

Second, just use CSS to set padding-top on the div, so that the content starts some arbitrary amount of the way from the top of the div, leaving your icon nicely displayed.

Upvotes: 1

Related Questions