Question

嗨我在下拉列表中有标题列表，如字符串ex：

"Bharat Untitled offer #564", "Bharat Untitled offer #563"

分别

它的标题很长，我们希望标题应该显示前8个字符，然后是'...'和最后4个字符。

我使用了css规则：

.title{
    max-width: 100px;
    min-width: 100px;
    overflow: hidden;
    text-overflow:ellipsis;
}

输出如下：

Bharat Unt ......

我想要像：

Bharat无题...... ffer

任何想法如何做到这一点？

Answer 1

试试这个：

＆＃13;

var charAtBeginning = 10;
var charAtEnd = 7;
var myStr = "I have list of title in a drop-down as string example";
var finalOutput = "";
if (myStr.length > (charAtBeginning + charAtEnd)) {
  finalOutput = myStr.substring(0, charAtBeginning) + '..' + myStr.substring((myStr.length - charAtEnd), myStr.length);
}
alert(finalOutput);

＆＃13;

Answer 2

如果你想用javascript或jquery做，那么有一些可能的方法来做这件事，我将在这里说明menthod。

   function processName(ret){
    ret = ret.substr(0,8) + "..."+ret.substr(ret.length - 5);
    return ret;
   }

现在您需要做的就是将每个值传递给此函数，我假设您知道如何执行此操作。祝你好运。

Answer 3

https://jsfiddle.net/8ye6df9p/

我做了这个小东西..我使用了等宽字体......希望它能让你更聪明一点..

＆＃13;

span {
  font-family: "Lucida Console", Monaco, monospace;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6em;
  font-size: 1em;
}

＆＃13;

<span>dog eatsdodddddddddgsdfghjkghersdddgsdfghjkghersdddgsdfghjkghersdddgsdfghjkgherstyfghurefyghujrttgyhujrttgyhjretghrtgh</span>

<span>dogfgggyfg ff tgyhujrttgyhjretghrtgh</span>

<span>dog </span>

<span>brainatgs200 </span>

＆＃13;

如何为文本字符串自定义css椭圆

3 个答案: