Question

该片段几乎解释了我想要的内容。如何使用html5 / css / js执行此操作？

＆＃13;

body {
  background-color: teal;
  color: orange;
  font-family: verdana;
  text-transform: uppercase;
  word-wrap: break-word;
}
#song {
  background-color: turquoise;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 20px black;
}
.button {
  border-radius: 5px;
  border: solid orange 1px;
  box-shadow: 0px 0px 15px pink;
  background-color: cyan;
  color: white;
  cursor: hand;
  opacity: 0.75;
}
.button:hover {
  opacity: 1.0;
}
#play {
  width: 100px;
  height: 100px;
}
#play img {
  height: 100%;
  width: 100%;
  position: relative;
}
.title {
  text-transform: uppercase;
  display: inline;
  position: relative;
  top: -30px;
  left: 10px;
}

＆＃13;

<h1>REPLACE THIS:</h1>
<!--original code-->
<div id="song">
  <button class="button" id="play">
    <img src="http://lizkhoo.com/content/play-icon.png">
  </button>
  <h1 class="title">I am a really really really long song title</h1>
</div>
<!--end original code-->

<h1>WITH THIS:</h1>
<div id="song">
  <button class="button" id="play">
    <img src="http://lizkhoo.com/content/play-icon.png">
  </button>
  <h1 class="title">I am a really...</h1>
</div>

＆＃13;

Answer 1

<强>的jsfiddle

http://jsfiddle.net/4kayztrs/

我想我知道你在说什么，但不是很清楚。试试吧。

.title {
    text-overflow: ellipsis;
    width: 210px;
    white-space: nowrap;
    overflow: hidden;
}

您可以更改宽度，直到获得所需的正确样式。

Answer 2

我相信这可行。

function shorten(text, maxLength) {
    var ret = text;
if (ret.length > maxLength) {
    ret = ret.substr(0,maxLength-3) + "...";
}
    return ret;
}

OR：

textoverflow：省略号

CSS中的

也可以实现这一目标。有时最好使用CSS，因为它会自动执行。但它是你的选择。

Answer 3

如果我理解你的问题，这应该可以解决问题：

var nbCharMax = 12 // Max number of char you want after text shortening

var longText = document.getElementById("longText");
longText.innerHTML = longText.innerHTML.substring(0, nbCharMax) + "...";

<div id="longText">I'm a really really long text</div>

用省略号替换excel文本（...）

3 个答案: