CODEWITHSUNDEEP
htmlcss
Mntfr
Mntfr

Reputation: 513

How to make a span tag do a line break if the text its too big?

 <li class="menuitem item ">
    <a href="http://localhost:8000/SupplierTenderCreate.php?New=Yes">

        <span>Create a New Tender</span>

    </a>
</li>

and that works fine however these are options in a side menu so sometimes the span tag that gives the option name has to much text and I want to make it so that it has a determinated width an if it surpases that width it puts a break line

I have tried with

.menuitem .item > a > span{
  display:block;
  width: 150px;
  word-break: break-all;
}

but it does not work also I know that it would be better to use divs but I cant change it

Upvotes: 1

Views: 1599

Answers (4)

Karvan
Karvan

Reputation: 260

You can use this code without touching your html.

.menuitem.item a span {  width: 150px; display: block; }
 <li class="menuitem item">
    <a href="http://localhost:8000/SupplierTenderCreate.php?New=Yes">

        <span>Create a New Tender and Create a New Tender and Create a New Tender and Create a New Tender</span>

    </a>
</li>

Upvotes: 0

jafarbtech
jafarbtech

Reputation: 7015

give only .item > a > span for the selector

.item > a > span{
  display:block;
  width: 150px;
  word-break: break-all;
}
<li class="menuitem item ">
    <a href="http://localhost:8000/SupplierTenderCreate.php?New=Yes">

        <span>Create a New Tender</span>

    </a>
</li>

Upvotes: 1

knocked loose
knocked loose

Reputation: 3304

You are calling the same parent twice:

.menuitem is the same element as .item

Try this:

.menuitem > a > span{}

JSFiddle

Upvotes: 1

actc
actc

Reputation: 682

You have an error in your selector. Your list item has the two classes 'menuitem' and 'item'. If you want to match both of them, change the selector to .menuitem.item > a > span, effectively removing the space between. So try

.menuitem.item > a > span {
  display:block;
  width: 150px;
  word-break: break-all;
}

Upvotes: 2

Related Questions