Question

我希望省略号点应该是文本的中心。当我使用text-overflow: ellipsis时，它会显示最后的点，而我希望它们居中。

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>

上面的例子显示了这样的结果

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

预期结果如下：

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

Answer 1

纯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>

Here is a fiddle to play with - 更改p宽度，你会看到它是如何工作的，不完美但是你用纯css得到的最好，而无需手动计算分割的位置

Answer 2

这不是通过使用纯css完成的，所以我在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：

<script type="text/javascript" language="javascript">
$(function() {

$('#dot5 .pathname').each(function() {
var path = $(this).html().split( ' ' );
if ( path.length > 1 ) {
var name = path.pop();
$(this).html( path.join( ' ' ) + '<span class="filename">' + name + '</span>' );
$(this).dotdotdot({
after: '.filename',
wrap: 'letter'
});      
}
});
});
</script>

Demo Here

Answer 3

一个简单的解决方案是在p标签内添加一个span，并在文本溢出时显示省略号，并在span标签后添加最后一个单词。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

因为它超越了jQuery，所以这是一个更简单的pure-js实现：

通过从末尾开始计算的字符的百分比或数量来设置省略号位置
使用原始文本设置title属性
按画布指标计算
重新计算去抖动调整大小（仅当元素大小发生变化时）
重新计算使用缓存变量

（在Chrome，Firefox，Edge和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>

文本溢出省略号点应该是文本的中心

4 个答案: