[solved] controlling word wraping

[wongadob]

I am trying to take some control of where some text in a li wraps. Here is what I want to do. It is a typical set of tags and each tag has an X icon for deleting that tag. so it takes this form

		   <div id="tags_text" style="display:none;">				<ul class="profile_tag_list" data-bind="template: {foreach: data()[0].add_tags(), name:'add_TagsTemplate'}">				</ul>			</div>

<script type="text/x-jquery-tmpl" id="add_TagsTemplate">	<li id='${atag}' class='tags_li'>${atag}<span class='tags_li' style='margin-right:5px;margin-left:3px;'><img src='images/tag_erase.png' class='tag_erase' onclick='removeTagProfile("${atag}")'style="cursor: pointer;"></span></li></script>

Now the behavior I want is to wrap the whole tag if the little X icon will not also fit on the line. ideally the full tag and the X would stay on the line, but most important really is that the last word and the X would be on the same line i.e. tag 1 X tag 2 X The thirdtag X would be OK, but thistag 1 X tag 2 X The third tagX would not be OK ideally tag 1 X tag 2 XThe third tag X would work. I have tried putting it all in one li to see if there is any way I can make that whole li warp as if it was one long word. But have no idea how to achieve it. Any suggestions or solutions appreciated

Edited October 29, 2012 by wongadob

[Ingolme]

Put each tag and X together within an inline element, like <span> and set the white-space property to "nowrap"

<span class="together">Tag1 <img alt="X"></span> <span class="together">Tag2 <img alt="X"></span> <span class="together">Tag3 <img alt="X"></span> .together {    white-space: nowrap;}

[wongadob]

Perfect! Thanks!