Javascript 左侧的文本溢出省略号_Javascript_Html_Css

Javascript 左侧的文本溢出省略号
javascript html css
Javascript 左侧的文本溢出省略号,javascript,html,css,Javascript,Html,Css,我有一个路径列表（因为没有更好的词，也许面包屑路径更能描述它们）。有些值太长，无法在其父级中显示，因此我使用了文本溢出：省略号。问题是重要信息在右边，所以我希望省略号出现在左边。像这样的ascii艺术： ---------------------------- |first > second > third | |...second > third > fourth| |...fifth > sixth > seventh| --------------
我有一个路径列表（因为没有更好的词，也许面包屑路径更能描述它们）。有些值太长，无法在其父级中显示，因此我使用了
文本溢出：省略号。问题是重要信息在右边，所以我希望省略号出现在左边。像这样的ascii艺术：
----------------------------
|first > second > third    |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------

请注意，第一行足够短，因此保持左对齐，但其他两行太长，因此省略号显示在左侧
我更喜欢只使用CSS的解决方案，但如果无法避免，JS也可以。如果该解决方案只在Firefox和Chrome中工作，那也没关系
编辑：在这一点上，我正在寻找一种解决Chrome中的bug的方法，当一个文档混合了RTL和LTR时，这些bug会阻止它正确呈现。这是我从一开始就真正需要的，我只是没有意识到
 像这样的怎么样？它使用方向、文本对齐和文本溢出来获取左侧的省略号。根据，将来可能会使用左溢出类型
值指定左侧的省略号，但仍被认为是实验性的

p{
空白：nowrap；
溢出：隐藏；
/*“溢出”值必须不同于“可见”*/
文本溢出：省略号；
宽度：170px；
边框：1px实心#999；
方向：rtl；
文本对齐：左对齐；
}
第一>第二>第三
第二>第三>第四>第五>第六
第五>第六>第七>第八>第九
基于您的编辑：
在这一点上，我正在寻找一个解决Chrome中bug的方法
当文档与RTL混合时，会阻止其正确呈现
这是我从一开始就真正需要的，我只是没有
认识到这一点
您是否研究过unicode bidi
css属性（请参阅或）？事实上，我自己才知道这件事。我的猜测是，对于那些与主站点方向相反的部分，您可能希望使用embed
值。因此，在j08691的回答中，它是方向：rtl
添加unicode-bidi:embed
。这应该可以解决您面临的“混合RTL和LTR”问题。
这有点问题，但可能是朝着正确的方向发展的一点


$（“.container”）
.animate（{'width'：450}，4000）
.animate（{'width'：100}，4000）
.animate（{'width'：170}，4000）
.container{
空白：nowrap；
溢出：隐藏；/*“溢出”值必须不同于“可见”*/
文本溢出：省略号；
宽度：170px；
边框：1px实心#999；
方向：rtl；
}  
.容器.零件{
方向：ltr；
}

第二
第三
第四
第五
第六
我将一些JavaScript放在一起，以便regex输出三项，并在必要时添加省略号。这并没有明确说明框中可以容纳多少文本，但如果框已修复，则这可能不是问题
<style>
p {  
    white-space: nowrap;                     
    overflow: hidden;
    text-overflow: ellipsis; 
    width:170px;
    border:1px solid #999;
    direction:rtl;
    text-align:left;
} 
</style>

<p>first &gt; second &gt; third<br />
second &gt; third &gt; fourth &gt; fifth &gt; sixth<br />
fifth &lt; sixth &lt; seventh &lt; eighth &lt; ninth</p>

<script>
    var text = $( 'p' ).text(),
        split = text.split( '\n' ),
        finalStr = '';
    for( i in split ){
        finalStr = finalStr.length > 0 ? finalStr + '<br />' : finalStr;
        var match = /(\w+\s?(<|>)?\s?){3}$/.exec( split[i] );
        finalStr = finalStr + ( split[i].length > match[0].length ? '...' : '' ) + match[0];
    }
    $( 'p' ).empty().html( finalStr );
</script>


p{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：170px；
边框：1px实心#999；
方向：rtl；
文本对齐：左对齐；
} 
第一第二第三

第二第三第四第五第六

第五第六第七第八第九
var text=$（'p'）.text（），
split=text.split（'\n'），
finalStr=''；
对于（拆分中的i）{
finalStr=finalStr.length>0？finalStr+'
'：finalStr；
var match=/（\w+\s？（）？\s？{3}$/.exec（split[i]）；
finalStr=finalStr+（拆分[i]。长度>匹配[0]。长度？'…'：''）+匹配[0]；
}
$（'p'）.empty（）.html（finalStr）；
我最终不得不破解并用JavaScript做点什么。我希望有人能想出一个万岁的CSS解决方案，但人们似乎只是投票的答案应该是正确的，如果不是因为Chrome的错误j08691可以因其工作获得奖金
<html>
    <head>
        <style>
            #container {
                width: 200px;
                border: 1px solid blue;
            }

            #container div {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
        <script>
            function trimRows() {

                var rows = document.getElementById('container').childNodes;
                for (var i=0, row; row = rows[i]; i++) {
                    if (row.scrollWidth > row.offsetWidth) {
                        var textNode = row.firstChild;
                        var value = '...' + textNode.nodeValue;
                        do {
                            value = '...' + value.substr(4);
                            textNode.nodeValue = value;

                        } while (row.scrollWidth > row.offsetWidth);
                    }
                }
            }
        </script>
    </head>
    <body onload='trimRows();'>
    <div id="container" >
        <div>first > second > third</div>
        <div>second > third > fourth > fifth > sixth</div>
        <div>fifth > sixth > seventh > eighth > ninth</div>
    </div>
    </body>

</html>


#容器{
宽度：200px；
边框：1px纯蓝色；
}
#货柜组{
宽度：100%；
溢出：隐藏；
空白：nowrap；
}
函数trimRows（）{
var rows=document.getElementById（'container'）.childNodes；
for（变量i=0，行；行=行[i]；i++）{
if（row.scrollWidth>row.offsetWidth）{
var textNode=row.firstChild；
var值='…'+textNode.nodeValue；
做{
value='…'+value.substr（4）；
textNode.nodeValue=值；
}while（row.scrollWidth>row.offsetWidth）；
}
}
}
第一>第二>第三
第二>第三>第四>第五>第六
第五>第六>第七>第八>第九

为什么不直接使用方向：rtl
使用@Hemlocks、@Brian Mortenson和@Jimbo的解决方案，我构建了一个jQuery插件来解决这个问题
我还添加了使用.html（）返回初始值的支持，而不是让它返回当前的innerHTML。希望它对某人有用
(function($) {

$.trimLeft = function(element, options) {

    var trim = this;

    var $element = $(element), // reference to the jQuery version of DOM element
         element = element;    // reference to the actual DOM element

    var initialText = element.innerHTML;

    trim.init = function() {
        overrideNodeMethod("html", function(){ return initialText; });
        trimContents(element, element);
        return trim;
    };

    trim.reset = function(){
        element.innerHTML = initialText;
        return trim;
    };

    //Overide .html() to return initialText.
    var overrideNodeMethod = function(methodName, action) {
        var originalVal = $.fn[methodName];
        var thisNode = $element;
        $.fn[methodName] = function() {
            if (this[0]==thisNode[0]) {
                return action.apply(this, arguments);
            } else {
                return originalVal.apply(this, arguments);
            }
        };
    };

    var trimContents = function(row, node){
        while (row.scrollWidth > row.offsetWidth) {
            var childNode = node.firstChild;
            if (!childNode)
                return true;            
            if (childNode.nodeType == document.TEXT_NODE){
                trimText(row, node, childNode);
            }
            else {
                var empty = trimContents(row, childNode);
                if (empty){
                    node.removeChild(childNode);
                }
            }
        };
    };

    var trimText = function(row, node, textNode){
        var value = '\u2026' + textNode.nodeValue;
        do {
            value = '\u2026' + value.substr(4);
            textNode.nodeValue = value;
            if (value == '\u2026'){
                node.removeChild(textNode);
                return;
            }
        }
        while (row.scrollWidth > row.offsetWidth);
    };

    trim.init();

};

$.fn.trimLeft = (function(options){
  var othat = this;

  var single = function(that){
      if (undefined == $(that).data('trim')) {
          var trim = new $.trimLeft(that, options);
          $(that).data('trim', trim);
          $(window).resize(function(){
              $(that).each(function(){
                    trim.reset().init();
              });
          });
       }   
   };

   var multiple = function(){
        $(othat).each(function() {
            single(this);
        });
    };

    if($(othat).length>1)
        multiple(othat);            
    else
        single(othat);

    //-----------        
    return this;
});


})(jQuery);

开始使用：
//Call on elements with overflow: hidden and white-space: nowrap 
$('#container>div').trimLeft();
//Returns the original innerHTML
console.log($('#test').html());

使用稍微复杂一点的标记（使用bdi标记和省略号的额外跨距），我们可以用CSS完全解决这个问题，根本不需要JS——跨浏览器（即FF、Chrome），包括将标点符号保留在右侧：

诚然，这是一种黑客行为，涉及到伪元素善。然而，我们的团队一直在生产中使用这段代码，我们还没有一个
<p>first > second > third<br/>
second > third > fourth <br>
fifth > sixth > seventh</p>

p{
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
  white-space: nowrap;
  width: 140px;
}

[].forEach.call(document.getElementsByTagName("p"), function(item) {

  var str = item.innerText;

  //Change the operators
  str = str.replace(/[<>]/g, function(char){ return ({"<" : ">", ">" : "<"})[char] });

  //Get lines
  var lines = str.split(/\n/);

  //Reverse the lines
  lines = lines.map(function(l){ return l.split("").reverse().join("") }); 

  //Join the lines
  str = lines.join("<br>");

  item.innerHTML = str;

});