必须包含

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

绝对不能包含

display: inline

应该包含

position: sticky

我一直有这个问题，我想要一个解决方案，可以很容易地与动态宽度工作。解决方案使用css网格。 下面是代码的样子:

.parent { 显示:网格; Grid-template-columns: auto 1fr; ｝ .dynamic-width-child { 空白:nowrap;} 文本溢出:省略; 溢出:隐藏; ｝ .fixed-width-child { 空白:nowrap;} ｝ < div class = "父" > < div class = " dynamic-width-child”> iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh; lshd flhsd; lhfaaaaaaaaaaaaaaaaaaaa < / div > < div class = " fixed-width-child”>为什么?zed < / div > < / div >

你只需要添加一行css:

.app a {
   display: inline-block;
}

在引导程序4中，可以添加.text-truncate类来用省略号截断文本。

< script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> < script src = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " > < /脚本> <！——内联级别——> <span class=" font - family:宋体" style=" font - family:宋体;"> 敏捷的棕色狐狸跳过了懒惰的狗。 < / span >

必须包含

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

绝对不能包含

display: inline

应该包含

position: sticky

我必须做出一些长描述椭圆(只采取一个车道)，同时响应，所以我的解决方案是让文本换行(而不是空白:nowrap)，而不是固定宽度，我添加了固定高度:

span { display: inline-block; line-height: 1rem; height: 1rem; overflow: hidden; // OPTIONAL LINES width: 75%; background: green; // white-space: normal; default } <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au </span>