The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 
* {
	margin: 0;
	padding: 0
}

ul {
	margin: 10px;
}

li {
	width: 100%;
	style: none;
}

.field {
	display: table;
	width: 100%;
}

.field > * {
	display: table-cell;
	border-radius: 5px;
	border: solid 1px #666;
	background: #eaeaea;
	box-shadow: 0 1px 0 #bababa;
}

.space {
	width: 10px;
	border: none;
	background: none;
	box-shadow: none;
}

.position {
	width: auto
}

span.field-position {
	display: block;
	padding-top: 15px;
	text-align: center;
	width: 45px;
	height: 30px
}

div.label {
	position:relative;
	vertical-align: middle;
	padding: 0 15px;
	border-right: 0;
	border-radius: 5px 0  0 5px;
}

span.label {
	display: block;
	text-overflow: ellipsis !important;
	word-wrap: break-word;
	height: 15px;
	width:100px;
	line-heihgt: 16px;
	white-space: nowrap;
	overflow:hidden;
}

div.actions {
	border-left: 0;
	min-width: 6px;
	width: auto;
	border-radius: 0 5px 5px 0;
}

div.actions .wrapper {
	/*display: none;*/
	white-space: nowrap;
	float: left;
	width: auto;
	background: red;
	position: relative;
}

div.actions a {
	display: inline-block;
	margin-right: 5px;
	width: 10px;
	height: 10px;
	background: #666;
}

.field:hover .actions a {
	display: block;
}

dabblet.html

<ul>
<li class="field ui-state-default type-2 enabled" id="field-462">
	<div class="position">
		<span class="field-position">11</span>
		<div class="arrow incoming above"></div>
		<div class="arrow incoming below"></div>
		<div class="arrow outgoing above"></div>
		<div class="arrow outgoing below"></div>
		<div class="jumps">
			
		</div>
	</div>
	<div class="space">&nbsp;</div>
	<div class="label">
		<span class="field-icon textfield"></span>
		<span class="label ellipsis">sdfsd sdf  sdaf asd fasdf asdf asdf asdf asdf werqwer wqer wqer wqer wqre qwe rqwer qwer qwer qwer qwer qwer qwer qwer qwer qwer qwer qwer qwer qwer qwer qwe rqwer qwer qwer wqer wqer qwer qwer qwer qwer qwer weqr wr qwr qwr r qwer wer werwqsadfasd fsadf safsdf sdf sd fasdf asdffdsfsdf</span>
	</div>
	<div class="actions">
		<span class="wrapper">
			<a class="action-jump"></a>
			<a class="action-duplicate"></a>
			<a class="action-delete"></a>
		</span>
	</div>
</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}