省略号即使文本溢出也不显示

huangapple go评论63阅读模式
英文:

Ellipsis is not showing up even if text overflows

问题

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <p className="text">
        This is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!
      </p>
    </div>
  );
}

style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.text {
  padding: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  margin: 50px;
  background: yellow;
  height: 150px;
}

Also, please refer this sandbox link -> https://codesandbox.io/s/overflow-ellipsis-cx6d44

Currently, when the text overflows, it doesn't shows ellipsis in the end. See the below image.

省略号即使文本溢出也不显示

I want to have ellipsis at the end similar to this image.

省略号即使文本溢出也不显示

英文:

App.js

import &quot;./styles.css&quot;;

export default function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
      &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;p className=&quot;text&quot;&gt;
        This is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!
      &lt;/p&gt;
    &lt;/div&gt;
  );
}

style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.text {
  padding: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  margin: 50px;
  background: yellow;
  height: 150px;
}

Also, please refer this sandbox link -> https://codesandbox.io/s/overflow-ellipsis-cx6d44

Currently, when the text overflows, it doesn't shows ellipsis in the end. See the below image.

省略号即使文本溢出也不显示

I want to have ellipsis at the end similar to this image.

省略号即使文本溢出也不显示

答案1

得分: 1

你需要在你现有的代码中添加以下样式:display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;,并且移除现有代码中的以下样式:padding: 20px;height: 150px;,这部分样式不再需要。

.text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    margin: 50px;
    background: yellow;
    line-height: 20px;
}
<p class="text">
    这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!这是一个测试!
</p>
英文:

You have to add styles display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; to your existing code and remove styles from your existing code
padding: 20px;height: 150px; no need of this style.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.text{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
margin: 50px;
background: yellow;
line-height: 20px;
}

<!-- language: lang-html -->

  &lt;p class=&quot;text&quot;&gt;
        This is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!
    &lt;/p&gt;

<!-- end snippet -->

答案2

得分: 0

white-space:nowrap 添加到您现有的代码中应该可以解决这个问题。

英文:

Adding white-space:nowrap to your existing code should fix it for you.

huangapple
  • 本文由 发表于 2023年7月20日 13:00:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76726792.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定