使用方向rtl时，前导特殊字符显示为尾随

Question

我正在使用direction属性作为标签。我的标签包含windows样式目录路径（带有反斜杠的路径）。使用direction:rtl;的目的是显示路径的结尾部分（或更确切地说是文件名），但问题是我将前导反斜杠作为尾随，这可能会使用户感到困惑。我该如何防止这种情况。

链接到小提琴：http://jsfiddle.net/pguwo67m/2/

这就是我正在做的事情：

增编

我注意到这个问题也出现在其他领先的特殊角色中。 小提琴：http://jsfiddle.net/6L1az99t/1/

Answer 1

当它太长时，它将如何删除部分路径：

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

检查一下。

变化 - 1.在标签内的span中添加文本 2.设置量程宽度并显示为块。

多数民众赞成。

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。