How to set text to 1 line in css-CSS Tutorial-php.cn

How to set text to 1 line in css

藏色散人

Release： 2023-02-17 15:23:41

Original

13858 people have browsed it

How to set 1 line of text in css: 1. Set the "display: inline-block;" style to the text element to convert it into an inline block element; 2. Give the text element "white-space: nowrap;" " style to force the text to not wrap; 3. Set the "overflow: hidden; text-overflow:ellipsis;" style to the text element to hide the excess part.

How to set text to 1 line in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS Set the text to display only one line, and display the ellipses if necessary

CSS Set the text to display only one line

.view-text{
  /**
思路：
1.设置inline-block属相
2.强制不换行
3.固定高度
4.隐藏超出部分
5.显示“……”
  */
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}

Copy after login

Attachment: Display Two lines of

<div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>
/**
思路：
1.超出的文本隐藏
2.溢出用省略号显示
3.溢出不换行
4.将对象作为弹性伸缩盒子模型显示
5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
  */
  .text2{
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

Copy after login

attribute style description:

display attribute can determine the position of the element in the fluid layout Performance (block-level or inline element);

##display: block; indicates that this element is a block-level element, displayed vertically, and the width is automatically filled, and can be set Width Height.
display: inline; means that this element is an inline element, displayed side by side, the width automatically shrinks, and the width and height cannot be set.
display:inline-block; indicates that this element is an inline block, which can set the width and height and display side by side.

white-space attribute

The white-space attribute specifies how to handle whitespace within the element.

ValueDescriptionnormalDefault. White space is ignored by the browser. pre Blank spaces will be retained by the browser. It behaves like the

 tag in HTML.

nowrapThe text will not wrap, the text will continue on the same line until the
tag is encountered. pre-wrapPreserves whitespace sequences, but wraps normally. pre-lineCombines whitespace sequences, but retains newlines. inheritSpecifies that the value of the white-space attribute should be inherited from the parent element.

overflow property

The overflow property specifies what happens if content overflows an element's box.

ValueDescriptionvisibleDefault value. The content will not be trimmed and will be rendered outside the element box. hiddenThe content will be trimmed and the remaining content will be invisible. scrollThe content will be trimmed, but the browser will display scroll bars to view the remaining content. autoIf content is trimmed, the browser displays scroll bars to view the remaining content.

text-overflow property

The text-overflow property specifies how text should be displayed when it overflows the element that contains it. After overflow, you can set the text to be cut, to display an ellipsis (...), or to display a custom string (not supported by all browsers).

ValueDescriptionclipClip the text. ellipsisDisplay ellipsis symbols Use the given string to represent the trimmed text.



	... to represent trimmed text.
string

text-overflow needs to be used with the following two attributes:

white-space: nowrap;
overflow: hidden;

[Recommended:

css video tutorial】

The above is the detailed content of How to set text to 1 line in css. For more information, please follow other related articles on the PHP Chinese website!