leading specialcharacters appear as trailing while using direction rtl - css

Question

I am using direction property for a label. My label contains windows style directory paths(the ones with backslashes). The purpose of using direction:rtl; is to show the end part(or rather filenames) of the path, but the problem is I am getting the leading backslashes as trailing which might confuse the user. How can I prevent this.
Link to fiddle: http://jsfiddle.net/pguwo67m/2/
This is what I am working on:
AddenduM
I have noticed that this problem also arises for other leading special characters as well.
Fiddle: http://jsfiddle.net/6L1az99t/1/

Answer 1

How about this which will remove part of the path when it is too long:
NodeList.prototype.forEach = Array.prototype.forEach;
window.onload = function () {
adjustWidths();
};
function adjustWidths() {
// get all label elements
var labels = document.querySelectorAll('.path').forEach(function (lab) {
var width = lab.getBoundingClientRect().width;
if (width >= 260) {
var path = lab.innerHTML;
var pathArr = path.split("\\");
var newpath = pathArr[0] + '\\...\\' + pathArr[pathArr.length - 1];
lab.title = path;
lab.innerHTML = newpath;
}
});
}
#wrapper {
width: 300px;
border: 1px solid blue;
}
input {
width: 20px;
}
<div id="wrapper">
<div>
<input type="checkbox" />
<label class="path">development\productinfo.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">development\application\models\cron\dropshipmodel.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">develoment\application\controllers\cron\dropship.php</label>
</div>
<div>
<input type="checkbox" />
<label class="path">development\application\models\cron\dropshipmodel.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">develoment\application\controllers\cron\dropship.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">development\productinfo.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">development\application\models\cron\dropshipmodel.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">develoment\application\controllers\cron\dropship.php</label>
</div>
</div>

Answer 2

Check this.
Changes -
1. Add text in span inside label
2. Set width of span and display as block.
Thats it.
label {
direction: rtl;
float: left;
overflow-x:hidden;
white-space: nowrap;
}
label span{
width:150px !important;
display:block;
}
input {
float: left;
}
<div>
<input type="checkbox">
<label class="alterable"><span> \\\\development\productinfo.php</span></label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox">
<label class="alterable"><span>\development\application\models\cron\dropshipmodel.php</span></label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox">
<label class="alterable"><span>\develoment\application\controllers\cron\dropship.php</span></label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox">
<label class="alterable"><span>This is normal text, i want to display end part of a string</span></label>
<div style="clear:both;"></div>
</div>
Thnaks.