Javascript 多行文字溢出（点）：仅换行字

我有这样的代码示例：

  <div class="container">
    <div class="item n1">Proe Schugaienz</div>
    <div class="item n2">Proe Schugaienz</div>
  </div>

和css：

.item {
  margin: 5px;
  background: red;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.n1 {
  width: 8px;
}

.n2 {
  width: 80px;
}

但结果我得到：

因此，我希望实现以下目标：

使用纯css或dotdot.js可以吗？ 如果单词（句子）不能匹配其父级：则只显示默认的单行文本溢出 如果单词（句子）能够一个单词一个单词地匹配父单词-然后匹配它，没有字母连字号

所以我不想我的容器被高度扩展（我有很多数据，这只是一个例子，我不能硬编码一些块）

您可以使用flex

<div class="container">
 <span></span>
 <em></em>
</div>
.container {
   display: flex;
   justify-content: center; /* centers content horizontally*/
   align-items: center /* centers content vertically*/
}

.集装箱{
显示器：flex；
对齐内容：居中；/*水平居中内容*/
对齐项目：居中/*垂直居中内容*/
}

这里有一个建议，可以防止单词中断-标记中也有更改：

我正在使用

flexbox

container

item

作为应用了dotdot的div

internal

——这确保了两件事：

a<代码>内部获取内容的宽度

b<代码>换行：DotDot应用的断开单词不会断开单词

现在可以检测何时会发生断字或溢出-这可能是当

内部

宽度超过

项目

宽度时

所以我们可以在dotdot的回调中检测到这一点！ 当单词开始断裂时，您需要省略号-因此，将文本替换为

…

，就像dotdot那样

请参见下面的演示：

$（'.inner'）.dotdot({
总结：“单词”，
看:"窗户",，
回退托莱特：错，
回调：函数（isTruncated）{
//这检测“断字”
if（$（this）.outerWidth（）>$（this）.closest（'.item'）.outerWidth（））{
$（this.text（“…”）；
}
}
});
.item{
保证金：5px；
背景：红色；
填充：2px；
显示器：flex；
高度：100px；
}
.n1{
宽度：12px；
}
.n2{
宽度：80px；
}
.n3{
宽度：150px；
}

舒盖恩斯教授。
舒盖恩斯教授。这里有更多的文字。这里有更多的文字。这里有更多的文字。
舒盖恩斯教授。这里有更多的文字。这里有更多的文字。这里有更多的文字。
您应该设置显示：内联块；线高：26px；（或您认为合适的任何合适值）到.n1类，并将宽度增加到16px（即足够容纳两个字母的宽度）。因此，最终css应如下所示：

.item {
  margin: 5px;
  background: red;
  padding: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.n1 {
  line-height: 26px;
  width: 16px;
}
.n2 {
  width: 80px;
}

同时删除script.js中为获得相同结果而使用的行。它应该对你有用
 我认为最简单的解决方案是css“文本溢出：省略”。
您可以使用下面的css代码段获得所需的结果

.item.n1 {width: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}

注意,；宽度是点的转折点。
到要用。。。应用以下代码

.example-element{
max-width: example-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

你可以调整宽度到你想要的最大值。
因为你已经在使用JS了，这就是我在没有任何库/插件的情况下可以做到的


const items=document.querySelectorAll（'.item'））
const log=document.querySelector（“#log”）
常数最小宽度=32
//检查元素是否小于最小宽度
//并应用一个类来隐藏文本并显示省略号。
对于（让项目中的项目）{
如果（item.clientWidth<最小宽度）{
item.classList.add（'hidden'）
}
}
.item{
背景色：红色；
文本溢出：省略号；
溢出：隐藏；
边缘底部：0.5雷姆；
填充：0.2rem；
}
.n1{
宽度：1.5rem；//24px
}
.n2{
宽度：6雷姆；
}
/* 
这将隐藏文本并显示省略号
*/
.隐藏{
位置：相对位置；
空白：nowrap；
}
.隐藏的：：以前{
内容：“…”；
显示：块；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景色：红色；
文本对齐：居中；
}

舒盖恩斯教授
舒盖恩斯教授

$.fn.overflow=函数（）{
返回此。每个（函数（）{
如果（$（此）[0].scrollWidth>$（此）.innerWidth（）{
$（this）.css（'溢出'，'隐藏'）.css（'文本溢出'，'省略号'）.css（'空白'，'nowrap'））.css（'最小宽度'，'16px'）；
}
});
};
$（函数（）{
$（'.item'）.overflow（）；
});
.item{
保证金：5px；
背景：红色；
填充：2px；
溢出：自动；
单词包装：打断单词；
}
.n1{
宽度：8px；
}
.n2{
宽度：80px；
}

舒盖恩斯教授
舒盖恩斯教授
我同意添加文本溢出之前提供的答案：省略号；即使内容没有溢出，对div的调用也会起作用。我相信您希望在内容的开头添加省略号，这可以通过“反向省略号”实现，无需任何js代码的帮助，您就可以实现这种输出。我为您创建了一个plnkr：


.box{
宽度：250px；
边框：1px纯银；
填充：1em；
利润率：1米0；
}
.省略号{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.反向省略号{
/*你的行动*/
文本溢出：剪辑；
位置：相对位置；
背景色：#FFF；
}
.反向省略号：before{
内容：'\02026'；
位置：绝对位置；
z指数：1；
左：-1米；
背景色：继承；
左：1米；
左边距：0.5em；
}
.反向省略号范围{
最小宽度：100%；
位置：相对位置；
显示：内联块；
浮动：对；
溢出：可见；
背景色：继承；
文本缩进：0.5em；
}
.反向省略号span:before{
内容：''；
位置：绝对位置；
显示：内联块；
宽度：1米；
高度：1米；
背景色：继承；
z指数：200；
左：-.5em；
}
身体{
边缘：1米；
}
HTML
.example-element{
max-width: example-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

      .box {
    width: 250px;
    border: 1px solid silver;
    padding: 1em;
    margin: 1em 0;
  }

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reverse-ellipsis {
    /* Your move. */
    text-overflow: clip;
    position: relative;
    background-color: #FFF;
  }

  .reverse-ellipsis:before {
    content: '\02026';
    position: absolute;
    z-index: 1;
    left: -1em;
    background-color: inherit;
    padding-left: 1em;
    margin-left: 0.5em;
  }

  .reverse-ellipsis span {
    min-width: 100%;
    position: relative;
    display: inline-block;
    float: right;
    overflow: visible;
    background-color: inherit;
    text-indent: 0.5em;
  }

  .reverse-ellipsis span:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: inherit;
    z-index: 200;
    left: -.5em;
  }

  body {
    margin: 1em;
  }

HTML 

      <!DOCTYPE html>
  <html>

  <head>

  <link rel="stylesheet" href="style.css" />

  </head>

  <body>

  <p>The goal would be to add ellipsis on the beginning and show the end of the content. Any idea?</p>
  <div class="box  ellipsis  reverse-ellipsis"><span>Here is some long content that doesn't fit.</span></div>
  <div class="box  ellipsis  reverse-ellipsis"><span>Here is some that does fit.</span></div>
  </body>

  </html>