英文:
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 "./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.
答案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 -->
<p class="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>
<!-- end snippet -->
答案2
得分: 0
将 white-space:nowrap
添加到您现有的代码中应该可以解决这个问题。
英文:
Adding white-space:nowrap
to your existing code should fix it for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论