Bullet behaving like soft hyphen

Question

I want to create list of inline items, separated by bullets, but I want to hide all bullets on the end of line. Example:

France • Germany • Greece

Hungary • Iceland • Ireland

(As you can see, there's no bullet between Greece and Hungary).

Now, the problem is, I need this to work in any viewport width. The text should wrap naturally and bullets should appear only when they are not at the line break.

This is somehow similar to soft hyphen () behaviour.

Is there any method to achieve this? Maybe some kind of unicode control character..?

Thanks!

@Kirk What is unclear about the question? How could he put a working fiddle, when he has no idea how to make it work? — user123444555621, Dec 24 '13 at 08:52

score 0 · Answer 1 · answered Dec 24 '13 at 09:07

0

You Just need to write simple css code:

.someclass{
list-style:none;
}

add class in your

<ui>
<li class="someclass">
</li>
</ul>

answered Dec 24 '13 at 09:07

Priya jain

753
2
5
15

this will only remove the bullets.. – Prasanna Aarthi Dec 24 '13 at 10:28

score 0 · Answer 2 · answered Dec 24 '13 at 10:41

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Display Progress</title>
    <script src="Scripts/jquery-1.3.2.js"
    type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
        var geoList = [
             { Country: "India", State: "Delhi" },
             { Country: "US", State: "Alabama" },
             { Country: "US", State: "Georgia" },
             { Country: "US", State: "Texas" },
             { Country: "US", State: "NewYork" }
             ];
            $('#LoadPage').append("<ul id='cList'></ul>");
            for (i = 0; i < geoList.length; i++) {
                $("#cList").append("<li>" +
                geoList[i].Country + "-" +
                geoList[i].State + "</li>");
            }
        });
    </script>
</head>
<body>
    <form id="form1">
    <div>   
        <div id="LoadPage">
        </div>  
    </div>
    </form>
</body>
</html>

Bullet behaving like soft hyphen

2 Answers2