如何在文本中间显示文本溢出省略号

Posted 2023-05-07

【中文标题】如何在文本中间显示文本溢出省略号

【英文标题】：How to show text overflow ellipsis in the middle of the text

【发布时间】：2015-09-06 07:36:23

【问题描述】：

我正在使用固定宽度的剑道网格。如果文本更多，则显示省略号。但我可以根据字符串的结尾区分行。由于这种影响，我无法找到它。所以，我需要在文本中间使用省略号。

例子：

abcdefghijklm
abcdefg...  -> Normal Ellipse
abcd...klm  -> I Want need this type of output

【问题讨论】：

我想到的唯一想法是减去最后一个树字符，将第一个字符放在一个应用省略号的跨度中，然后立即将最后三个字符。你怎么看？

你会接受文本开头的省略号吗？在纯 CSS 中无法做到这一点

确实，我没有办法处理纯 css！我的解决方案暗示了 javascript 和 css。

你是从哪种 html 开始的，包含这些字符串？

你可以在这里找到你想要的东西：***.com/questions/831552/…

【参考方案1】：

一种方法如下，尽管这确实——当然——依赖于 JavaScript：

function centralEllipsis(opts) 

    // the default settings, which can be overridden
    // by the user:
    var settings = 
        // the number of the original characters to show:
        'maxLength': 7,

        // the character-sequence, or HTML character-
        // entity to use to replace the missing characters:
        'ellipsis': '…',

        // the attribute to which you'd like to write the
        // original text (this function does also write
        // the text to the 'title' attribute though):
        'writeToAttribute': 'data-originaltext'
    ,

   // the element upon which we're working (cached
   // because we'll access it more than once):
    _this = this;

    // iterating over the properties supplied by the user:
    for (var prop in opts) 

        // if the current property ('prop') of the object
        // ('opts') is enumerable and not from the prototype:
        if (opts.hasOwnProperty(prop)) 

            // we update that property in the settings object
            // (if the typeof the property-value ('opts[prop]')
            // is not equal to the string 'undefined', if it is
            // then we use the original property-value:
            settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
        
    

    // we divide the settings.maxLength by 2 to work out
    // how many characters should appear at the beginning
    // of the string; using Math.ceil() to ensure whole
    // numbers:
    var prefixLength = Math.ceil(settings.maxLength / 2),

        // finding the length of the suffix by subtraction
        // of the prefixLength from the settings.maxLength:
        suffixLength = settings.maxLength - prefixLength,

        // setting the textContent of the current element
        // as the element's title text and storing it in
        // a variable:
        originalText = _this.title = _this.textContent,

        // empty variables initialised for later:
        prefix, suffix;

    // if the maxLength is less than the length of the original
    // text, then we go ahead (if not, we do nothing):
    if (settings.maxLength < originalText.length) 

        // storing the original text in the specified attribute:    
        _this.setAttribute(settings.writeToAttribute, originalText);

        // the prefix is the substring of the originalText, for
        // settings.maxLength number of characters starting at 
        // index 0 (the beginning of the string):
        prefix = originalText.substr(0, prefixLength);

        // if settings.maxLength is less than 2 then the
        // suffix is an empty string (''), otherwise it's
        // a substring of the originalText, using a negative
        // index which takes the last 'suffixLength'
        // characters from the string:
        suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

        // here we set the innerHTML (so that we can use HTML
        // character-entities, such as '&hellip;') to the
        // prefix + the settings.ellipsis character(s) + the suffix:
        _this.innerHTML = prefix + settings.ellipsis + suffix;
    



// Using Function.prototype.call() to use Array.prototype.forEach()
// on the array-like NodeList returned by document.querySelectorAll():
Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function (el) 
// the first argument (here: 'el') supplied to the function
// is the array-element (here a DOM node from the NodeList)
// from the array (NodeList) over which we're iterating.

    // using Function.prototype.apply() in order to specify
    // that 'this' in the function (centralEllipsis) will be
    // the supplied DOM node ('el'); the array is used to 
    // pass the arguments to the function, the empty object
    // is what will be the 'opts' variable in the function
    // called. It doesn't have to be there, it's simply left
    // in place to show how to pass arguments to the function,
    // and how to supply user-defined options to override the
    // the defaults:
    centralEllipsis.apply(el, []);
);

function centralEllipsis(opts) 
  var settings = 
      'maxLength': 7,
      'ellipsis': '…',
      'writeToAttribute': 'data-originaltext'
    ,
    _this = this;

  for (var prop in opts) 
    if (opts.hasOwnProperty(prop)) 
      settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
    
  

  var prefixLength = Math.ceil(settings.maxLength / 2),
    suffixLength = settings.maxLength - prefixLength,
    originalText = _this.title = _this.textContent,
    prefix, suffix;

  if (settings.maxLength < originalText.length) 

    _this.setAttribute(settings.writeToAttribute, originalText);

    prefix = originalText.substr(0, prefixLength);
    suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

    _this.innerHTML = prefix + settings.ellipsis + suffix;
  



Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) 
  centralEllipsis.apply(el, []);
);

<ul>
  <li class="midEllipsis">abcdefghijklm</li>
</ul>

外部JS Fiddle demo，用于实验。

要覆盖默认设置，例如将maxLength 设置为4：

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) 
  centralEllipsis.apply(el, [
    'maxLength': 4
  ]);
);

function centralEllipsis(opts) 
  var settings = 
      'maxLength': 7,
      'ellipsis': '…',
      'writeToAttribute': 'data-originaltext'
    ,
    _this = this;

  for (var prop in opts) 
    if (opts.hasOwnProperty(prop)) 
      settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
    
  

  var prefixLength = Math.ceil(settings.maxLength / 2),
    suffixLength = settings.maxLength - prefixLength,
    originalText = _this.title = _this.textContent,
    prefix, suffix;

  if (settings.maxLength < originalText.length) 

    _this.setAttribute(settings.writeToAttribute, originalText);

    prefix = originalText.substr(0, prefixLength);
    suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

    _this.innerHTML = prefix + settings.ellipsis + suffix;
  



Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) 
  centralEllipsis.apply(el, [
    'maxLength': 4
  ]);
);

<ul>
  <li class="midEllipsis">abcdefghijklm</li>
</ul>

外部JS Fiddle demo，用于实验。

或将'ellipsis' 字符设置为“»”字符（例如）：

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) 
  centralEllipsis.apply(el, [
    'ellipsis': '»'
  ]);
);

function centralEllipsis(opts) 
  var settings = 
      'maxLength': 7,
      'ellipsis': '…',
      'writeToAttribute': 'data-originaltext'
    ,
    _this = this;

  for (var prop in opts) 
    if (opts.hasOwnProperty(prop)) 
      settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
    
  

  var prefixLength = Math.ceil(settings.maxLength / 2),
    suffixLength = settings.maxLength - prefixLength,
    originalText = _this.title = _this.textContent,
    prefix, suffix;

  if (settings.maxLength < originalText.length) 

    _this.setAttribute(settings.writeToAttribute, originalText);

    prefix = originalText.substr(0, prefixLength);
    suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

    _this.innerHTML = prefix + settings.ellipsis + suffix;
  



Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) 
  centralEllipsis.apply(el, [
    'ellipsis': '&raquo;'
  ]);
);

<ul>
  <li class="midEllipsis">abcdefghijklm</li>
</ul>

外部JS Fiddle demo，用于实验。

参考资料：

Array.prototype.forEach()。 Conditional (Ternary) operator。 document.querySelectorAll()。 Element.innerHTML。 Element.setAttribute()。 Function.prototype.apply()。 Function.prototype.call()。 Node.textContent。 String.prototype.substr()。 typeof operator。

【讨论】：

超级...非常感谢。

【参考方案2】：

您添加了 css 和 javascript 标签，因此我想到了一种解决方法，这意味着这两种语言。

您可以尝试下一个解决方法： 1. 减去 variable_a 中除最后三个以外的所有字符。在 variable_b 中减去最后三个字符。 2. 在应用了省略号的跨度中抛出 variable_a。 3. 在第一个跨度之后立即添加另一个没有省略号的跨度，并用最后三个字符（变量_b）填充它