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

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

Ellipsis is not showing up even if text overflows

问题

App.js

  1. import "./styles.css";
  3. export default function App() {
  4.   return (
  5.     <div className="App">
  6.       <h1>Hello CodeSandbox</h1>
  7.       <h2>Start editing to see some magic happen!</h2>
  8.       <p className="text">
  9.         This is a test!This is a test!This is a test!This is a test!This is a
  10.         test!This is a test!This is a test!This is a test!This is a test!This is
  11.         a test!This is a test!This is a test!This is a test!This is a test!This
  12.         is a test!This is a test!This is a test!This is a test!This is a
  13.         test!This is a test!This is a test!This is a test!This is a test!This is
  14.         a test!This is a test!This is a test!This is a test!This is a test!This
  15.         is a test!This is a test!This is a test!This is a test!This is a
  16.         test!This is a test!This is a test!This is a test!This is a test!This is
  17.         a test!This is a test!This is a test!This is a test!
  18.       </p>
  19.     </div>
  20.   );
  21. }

style.css

  1. .App {
  2.   font-family: sans-serif;
  3.   text-align: center;
  4. }
  6. .text {
  7.   padding: 20px;
  8.   line-height: 20px;
  9.   overflow: hidden;
  10.   text-overflow: ellipsis;
  11.   width: 200px;
  12.   margin: 50px;
  13.   background: yellow;
  14.   height: 150px;
  15. }

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

  1. import &quot;./styles.css&quot;;
  3. export default function App() {
  4.   return (
  5.     &lt;div className=&quot;App&quot;&gt;
  6.       &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
  7.       &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
  8.       &lt;p className=&quot;text&quot;&gt;
  9.         This is a test!This is a test!This is a test!This is a test!This is a
  10.         test!This is a test!This is a test!This is a test!This is a test!This is
  11.         a test!This is a test!This is a test!This is a test!This is a test!This
  12.         is a test!This is a test!This is a test!This is a test!This is a
  13.         test!This is a test!This is a test!This is a test!This is a test!This is
  14.         a test!This is a test!This is a test!This is a test!This is a test!This
  15.         is a test!This is a test!This is a test!This is a test!This is a
  16.         test!This is a test!This is a test!This is a test!This is a test!This is
  17.         a test!This is a test!This is a test!This is a test!
  18.       &lt;/p&gt;
  19.     &lt;/div&gt;
  20.   );
  21. }

style.css

  1. .App {
  2.   font-family: sans-serif;
  3.   text-align: center;
  4. }
  6. .text {
  7.   padding: 20px;
  8.   line-height: 20px;
  9.   overflow: hidden;
  10.   text-overflow: ellipsis;
  11.   width: 200px;
  12.   margin: 50px;
  13.   background: yellow;
  14.   height: 150px;
  15. }

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;，这部分样式不再需要。

  1. .text{
  2.     display: -webkit-box;
  3.     -webkit-box-orient: vertical;
  4.     -webkit-line-clamp: 2;
  5.     overflow: hidden;
  6.     text-overflow: ellipsis;
  7.     width: 200px;
  8.     margin: 50px;
  9.     background: yellow;
  10.     line-height: 20px;
  11. }
  1. <p class="text">
  2.     这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！这是一个测试！
  3. </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 -->

  1. .text{
  2. display: -webkit-box;
  3. -webkit-box-orient: vertical;
  4. -webkit-line-clamp: 2;
  5. overflow: hidden;
  6. text-overflow: ellipsis;
  7. width: 200px;
  8. margin: 50px;
  9. background: yellow;
  10. line-height: 20px;
  11. }

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

  1.   &lt;p class=&quot;text&quot;&gt;
  2.         This is a test!This is a test!This is a test!This is a test!This is a
  3.         test!This is a test!This is a test!This is a test!This is a test!This is
  4.         a test!This is a test!This is a test!This is a test!This is a test!This
  5.         is a test!This is a test!This is a test!This is a test!This is a
  6.         test!This is a test!This is a test!This is a test!This is a test!This is
  7.         a test!This is a test!This is a test!This is a test!This is a test!This
  8.         is a test!This is a test!This is a test!This is a test!This is a
  9.         test!This is a test!This is a test!This is a test!This is a test!This is
  10.         a test!This is a test!This is a test!This is a test!
  11.     &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
  • css
  • ellipsis
  • overflow
  • text
匿名

发表评论

匿名网友

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

确定