Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like:
my_cool_function(param0, param1, param2, param3)<ul class="list">
<li class="token">
<span>My_cool_Function</span>
<ul class="tokenparams">
<li class="token">
<span>Param0</span>
</li>
<li class="token">
<span>Param1</span></li>
<li class="token">
<span>Param2</span>
</li>
<li class="token">
<span>Param3</span>
</li>
</ul>
</li>
</ul>
When the width of the ul container is sufficient, everything displays properly. However, if the width is reduced, the layout breaks and I want it to wrap neatly. Below is the CSS code currently in use:
ul.list{
height: auto;
display: block;
width: 600px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
cursor: text;
}
li.token{
display: inline-block;
white-space: nowrap;
margin: 0 10px 0 0;
padding: 0 1px 0 1px;
border: 1px solid transparent;
height: 18px;
vertical-align: top;
cursor: pointer;
}
li.token span {
float:left;
}
li.active {
border-color: #63B9FF;
}
ul.tokenparams {
list-style-type: none;
float: left;
padding-left: 0;
}
ul.tokenparams::before {
content: "(";
float: left;
margin-left: 2px;
}
ul.tokenparams::after {
content: ")";
margin-right: 2px;
}
ul.tokenparams .token:not(:last-child)::after{
content: ",";
}
In the provided example, at 600px width it looks fine but at 355px width, issues arise:
I have included a fiddle demonstrating the problem: http://jsfiddle.net/jvxzLt2s/
My goal is to introduce a line break after param2 and param3, allowing for better readability.