How to Delete First Word from
if the text overflows from it?

Question

I want to delete the first word from my <li> only if the text overflows from it.

Any ideas?

Here is my code.

<div class="box-heading box-sections box-block">
    <div class="nav">
        <ul id="menu">
            <?php foreach ($products as $product){ ?>
            <li><a href="#Section<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></a></li>
            <?php } ?>
        </ul>
    </div>
</div>

I want my <li> to show ANIMALS, CARS, CITYSCAPE and delete "CUSTOM" from it.

Could you also post relevant CSS code or create a **[fiddle](http://jsfiddle.net)**? — Ramiz Wachtler, Oct 23 '15 at 07:00
http://metalwallart.ca/index.php?route=product/customcategory&path=165 This is the link that I intend to do. — Ali Zia, Oct 23 '15 at 07:03
For CARS the li did not overflow...? do you still want to remove it? — JGV, Oct 23 '15 at 07:05
Yes. I would like to maintain the hierarchy. If even one word overflows, omit the word Custom from all `
http://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements this will help you to check weather element is overflow or not — Nishit Maheta, Oct 23 '15 at 07:18

score 4 · Answer 1 · answered Oct 23 '15 at 07:29

4

Finally I've got the solution, is this the desired effect?

Fiddle

$('#menu li > a').each(function(){
    var element = $(this);
    if(element[0].offsetWidth < element[0].scrollWidth){
        $(this).text(element[0].innerText.split(' ').splice(1,1));
    }
});

answered Oct 23 '15 at 07:29

Ramiz Wachtler

5,623
2
28
33

If my text overflows like CUSTOM LANDSCA.. I want to delete CUSTOM so that only LANDSCAPE is visible.. – Ali Zia Oct 23 '15 at 07:33
i think link i post is help you to create this example :) +1 – Nishit Maheta Oct 23 '15 at 07:35
@NishitMaheta I used it.. But it is not working properly. Can you help me with it? You have the code too.. It works but not as per need. – Ali Zia Oct 23 '15 at 07:36
@AliZia ehm, that's what this piece of code is doing right now? It checks for elements overflow and if it's true, then split the string (it's always CUSTOM ITEM) and delete the first element. – Ramiz Wachtler Oct 23 '15 at 07:39
I placed it my my tpl file but it does not seem to work. Please see the page link http://metalwallart.ca/index.php?route=product/customcategory&path=165 – Ali Zia Oct 23 '15 at 07:46

venkat7668 · Accepted Answer · 2015-10-23T07:59:09.130

3

If one menu item text exceed the given width, below program removes all the items first word from menu. fiddle

var items = $("#menu li a");

 items.each(function(index, item){
   if($(item)[0].offsetWidth < $(item)[0].scrollWidth){

   //remove first word in all items tabs
   items.each(function(index, item){
       $(item).text($(item).text().split(" ").splice(1,1)[0]);
   });

   //break main each loop
   return false;
   }
});

edited Oct 23 '15 at 07:59

answered Oct 23 '15 at 07:52

venkat7668

2,657
1
22
26

Just one more think. Can this be done through ajax or jquery too? I mean it I gradually decrease the width of my browser, It still works when the text exceeds the width? So that I don't have to lead the page every time? Is it possible? – Ali Zia Oct 23 '15 at 08:01
I used jQuery, and this function executes only once, on DOM ready event – venkat7668 Oct 23 '15 at 08:06

How to Delete First Word from if the text overflows from it?

2 Answers2

How to Delete First Word from
if the text overflows from it?