css 文字过长显示 |css 如何设置方框

.wrap {
/* 设置容器宽度 */
width: 300px;
/* 控制文本溢出 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 添加省略号 */
text-overflow: ellipsis;
}

以上代码中，大家为容器设置了一个固定的宽度，并利用CSS属性`white-space`来防止文字自动换行。接着，大家利用`overflow`属性来隐藏文本溢出的部分，并使用`text-overflow`来添加省略号以示未显示的文本。

如果您想要在没有限制容器宽度的情况下实现文本截断的效果，大家可以通过设置`display`属性为`-webkit-box`（适用于Webkit核心浏览器）或`-webkit-flex`（适用于支持Flexbox布局的浏览器）。以下是实现文本截断的代码示例：

/* Webkit核心浏览器 */
.wrap {
/* 设置容器高度 */
height: 45px;
/* 设定布局方式 */
display: -webkit-box;
/* 控制文本溢出 */
-webkit-box-orient: vertical;
/* 超出部分隐藏 */
overflow: hidden;
/* 添加省略号 */
text-overflow: ellipsis;
}
/* 支持Flex布局的浏览器 */
.wrap {
/* 设置容器高度 */
height: 45px;
/* 设定布局方式 */
display: -webkit-flex;
display: flex;
/* 控制文本溢出 */
-webkit-line-clamp: 2;
/* 超出部分隐藏 */
overflow: hidden;
/* 添加省略号 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}

以上代码中，大家利用`-webkit-box`和`-webkit-flex`分别设定了文本溢出隐藏的容器样式。其中，`-webkit-box-orient`和`-webkit-line-clamp`用来控制文本溢出和行数，这样大家就可以通过设定不同的行数来实现不同的截断效果。同时，大家还设置了`text-overflow`属性来添加省略号。

总的来说，通过CSS来控制长文本的溢出部分，是非常方便和实用的。希望这篇文章能够帮助到您在工作中解决文字过长显示的问题。