css implements text overflow and display ellipses without wrapping

藏色散人
Release: 2020-11-20 11:16:12
Original
5821 people have browsed it

How to implement css text without line wrapping and displaying ellipses over overflow: first open the css style sheet; then use the attribute "white-space: nowrap;" to force the text to not wrap; then use "text-overflow:ellipsis;" Just implement text overflow and display ellipses.

css implements text overflow and display ellipses without wrapping

Recommended: "css video tutorial"

1. Not mandatory Line wrap

  • white-space: nowrap; The text is forced not to wrap;

  • text-overflow:ellipsis; The text overflows and displays ellipsis;

  • overflow:hidden; Hide the overflow part;

2. Automatic line wrapping

  • word-wrap: break-word;

  • word-break: normal;

3. Force English word line break

word-break: break-all;

The above is the detailed content of css implements text overflow and display ellipses without wrapping. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!