Another way of line break through css without using br?

Question

<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

• Eric: Given an arbitrary piece of text from the database, how do you decide where you want the line break? Can there be more than one line break? Are there some cases where no line break should be added? Without that information, your question is unanswerable.

Answer 1

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.

• nidhi gupta: I can not use padding-top to adjust the image with content as there are many styles at hover and selected, and through this i may not get the expected result. Secondly, what about the line break? Is there any other alternative to break the line through css?
• Eric: "block levels elements like <div> are not valid inside of inline elements like <a>." - not true in HTML5

Answer 2

have you tried this?

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

• nidhi gupta: I can not try any tag like p, span or anything in between the line text as it will be coming directly from the database. Any addition to java may help if any?
• manuel-84: can you explain better how do you retrieve and display those texts? i.e. you can use php or javascript to manipulate data

Answer 3

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.

• cereallarceny: Can you do this and avoid using !important?
• pardis kermanshahi: In css file With highest priority, we don’t need to !important.