All geek questions in one place

Point overflow text point must be the center of the text

I want dots with ellipses to be the centers of the text. When I use it text-overflow: ellipsis, it shows the long dots, while I want them to be centered.

p.test1 {
    white-space: nowrap; 
    width: 100px; 
    border: 1px solid green;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:10px;
}
<p class="test1">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</p>
Run code

The above example shows a result similar to this

1 2 3 4 5 6 7 8 9...

Expected Result:

1 2 3 4 5 6 ... 13 14 15 16 17 18

+7
source share
4 answers

This will not be done using pure CSS, so I found a solution using jQuery.

<div id="wrapper">
    <div class="example">
        <h1>How to display Text-Overflow:ellipsis dots in center of the text</h1>
        <p><strong>Truncate text using jQuery</strong></p>
        <div class="r">
            <div class="box after pathname" id="dot5">
                <div class="pathname">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae pretium mauris. Ut tincidunt arcu diam, in congue elit efficitur id. Nunc maximus diam et tellus tincidunt, vitae placerat lacus ullamcorper.</div>
            </div>
        </div>
    </div>
</div>

Css:

div.r {
    width: 275px;
    background-color:red;
}

div.box {
    border: 1px solid #ccc;
    height: 40px;
    padding: 15px 20px 10px 20px;
}

.pathname {
    height: 25px;
    color:#fff;
    font-size:18px;
}

Javascript:

$(function() {
    $('#dot5 .pathname').each(function() {
        var path = $(this).html().split(' ');
        if (path.length === 0) {
            return;
        }

        var name = path.pop();
        $(this).html(path.join( ' ' ) + '<span class="filename">' + name + '</span>');
        $(this).dotdotdot({
            after: '.filename',
            wrap: 'letter'
        });
    });
});

Demo here

+2
source

css, js , , - , . , :

p.test1 {
  width: 200px;
  border: 1px solid green;
  padding: 10px;
  white-space:nowrap;
}

p > span {
  white-space: nowrap;
  overflow: hidden;
  vertical-align:middle;
}

.ellipsis {
  display: inline-block;
  width: calc(50% + 1.2em);
  text-overflow: ellipsis;
}

.indent {
  display:inline-flex;
  width: calc(50% - 1.2em);
  justify-content:flex-end;
}
<p class="test1">
  <span class="ellipsis">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</span><!--
  --><span class="indent">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</span>
</p>

, - p, , , , css ,

+4

span p span.

p.test1 {
  white-space: nowrap;
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

.elips {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  width: 100%;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p class="test1"><span class="elips">1 2 3 4 5 6 7 8 9 10 11 12</span> 13 14 15 16 17 18 Add Last word here</p>
+1

jQuery , pure-js:

  • , .
  • title
  • calculated on canvas marks
  • recalculated when resizing is released (only when resizing an element)
  • recount uses cached variables

(tested on Chrome, Firefox, Edge and Chrome Android)

/**
 * Attibute modifier to create middle ellipsis
 * When the attribute value is left blank the ellipsis will be in the middle
 * When positive the attribute value will be used as a percentage
 * When negative the attribute value will be used as character index counted from the end
 * @example
 *   <div data-middle-ellipsis>A Javascript solution to middle ellipsis</div>
 *   <div data-middle-ellipsis="20">A Javascript solution to middle ellipsis</div>
 *   <div data-middle-ellipsis="-3">A Javascript solution to middle ellipsis</div>
 */
const attributeName = 'data-middle-ellipsis'
const clamp = (val,min=Number.NEGATIVE_INFINITY,max=Number.POSITIVE_INFINITY)=>Math.max(min,Math.min(max,val))
const ellipsis = '…'
const map = new Map()
let timeoutId

testMiddleEllipsis()
window.addEventListener('resize', onResize, { capture: true, passive: true })
function onResize(e){
  clearTimeout(timeoutId)
  timeoutId = setTimeout(testMiddleEllipsis, 200)
}

function testMiddleEllipsis() {
  Array.from(document.querySelectorAll(`[${attributeName}]`)).forEach(elm=>{
    // do not recalculate variables a second time
    const mapped = map.get(elm)
    let {text, textLength, from, multiplier, font, textWidth, elementWidth} = mapped||{}
    // first time
    if (!mapped) {
    	text = elm.textContent
      textLength = text.length
      from = parseFloat(elm.getAttribute(attributeName))||50
      multiplier = from>0&&from/100
      const computedStyle = window.getComputedStyle(elm, null)
      font = `${computedStyle.getPropertyValue('font-weight')} ${computedStyle.getPropertyValue('font-size')} ${computedStyle.getPropertyValue('font-family')}`
      textWidth = getTextWidth(text, font)
      elementWidth = elm.offsetWidth
      map.set(elm, {text, textLength, from, multiplier, font, textWidth, elementWidth})
    }
    //
    const {offsetWidth} = elm
    const widthChanged = !mapped||elementWidth!==offsetWidth
    mapped&&widthChanged&&(mapped.elementWidth=elementWidth=offsetWidth)
    //
    if (widthChanged&&textWidth>elementWidth) {
      elm.setAttribute('title', text)
      let smallerText = text
      let smallerWidth = elementWidth
      while(smallerText.length>3){
        let smallerTextLength = smallerText.length
        const half = multiplier&&
            clamp(multiplier*smallerTextLength<<0,1,smallerTextLength-2)||
            Math.max(smallerTextLength+from-1,1)
        const half1 = smallerText.substr(0,half).replace(/\s*$/,'')
        const half2 = smallerText.substr(half+1).replace(/^\s*/,'')
        smallerText = half1+half2
        smallerWidth = getTextWidth(smallerText+ellipsis, font)
        if (smallerWidth<elementWidth) {
          elm.textContent = half1+ellipsis+half2
          break;
        }
      }
    }
  })
}

/**
 * Get the text width
 * @param {string} text
 * @param {string} font
 */
function getTextWidth(text, font) {
  let context = getTextWidth.context
  if (!context) {
    const canvas = document.createElement('canvas')
    context = getTextWidth.context = canvas.getContext('2d')
  }
  context.font = font
  const metrics = context.measureText(text)
  return metrics.width
}
html,body{
  min-width: 100%;
  min-height: 100%;
  line-height: 170%;
}

main {
  width: 100%;
  height: 100%;
  font-family: Arial;
  background: #fff linear-gradient(90deg
    ,transparent 130px
    ,#f0f0f0 130px
    ,#f0f0f0 260px
    ,transparent 260px
  );
}

[data-middle-ellipsis]{
  max-width: 130px;
  white-space: nowrap;
  box-shadow: -1px 0 0 red inset;
}

.inline-block { display: inline-block; }
.bold { font-weight: bold; }
.small { font-size: 10px; }
.large { font-size: 32px; }
<main>
<h1 data-middle-ellipsis>A Javascript solution to middle ellipsis</h1>
<div data-middle-ellipsis>The quick fox</div>
<div data-middle-ellipsis class="inline-block">The lazy dog</div>
<div data-middle-ellipsis>theQuickBrownFoxJumpsOverTheLazyDog</div>
<div data-middle-ellipsis class="bold">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis class="small">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis class="small bold">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis class="large">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis>The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis="70">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis="30">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis="1">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis="99">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis="-3">The quick brown fox jumps over the lazy dog</div>
<div data-middle-ellipsis="-3">The quick brown dog</div>
<div data-middle-ellipsis="0">The quick brown dog</div>
<div data-middle-ellipsis="-1">The quick brown dog</div>
<div data-middle-ellipsis="-99">The quick brown dog</div>
</main>
Run code
+1
source

Source: https://habr.com/ru/post/1672711/

More articles:


All Articles