css样式如何写非文本超出一行显示省略号

可以使用CSS的text-overflow属性和overflow属性来实现。具体写法为：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

其中，overflow属性用于控制超出部分的行为，可以设置为hidden、scroll、auto等；text-overflow属性用于指定省略号的样式，可以设置为ellipsis（省略号）或clip（直接裁剪）；white-space属性用于控制文字的换行，设置为nowrap表示不允许换行。

相关问题

css文本超出显示省略号 省略号换行显示怎么办

在CSS中，要实现文本超出显示省略号并且当省略号换行时能保持可读性，可以使用`text-overflow`属性结合`white-space`和`display`样式。以下是基本步骤：

1. 首先，你需要将元素的文本溢出处理设置为“ellipsis”，这通常通过`text-overflow: ellipsis;`完成。

.text-overflow-truncate {
   text-overflow: ellipsis;
   overflow: hidden;
}

2. 如果你想让包含省略号的内容在换行时仍然显示完整，你可以设置`white-space`属性为`nowrap`，这样内容就不会自动换行。

.text-overflow-truncate {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

然而，如果容器本身有固定的宽度，并且内容过长导致换行，你可能还需要配合`display`属性，如`display: -webkit-box` 或 `display: flex` 来限制行宽并使其水平对齐。

.container {
   width: 限定值;
   display: -webkit-box; /* 对于老版本浏览器 */
   display: flex;
   -webkit-line-clamp: 2; /* 可以限制最多显示两行 */
   line-clamp: 2;
   -webkit-box-orient: vertical; /* 指定垂直方向 */
   flex-wrap: wrap;
}

.text-overflow-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
}

在这个例子中，最多会显示两行，并且省略号会在最后一行末尾。如果内容只有一行，则不会换行。

文本超出两行显示省略号并有“展开”“收起”按钮效果，按钮在省略号后面

要实现这个效果，只需要调整一下CSS中的样式即可。具体实现方式如下：

CSS部分：

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

.expand-btn {
  display: inline-block;
  margin-left: 5px; /* 调整按钮与省略号的距离 */
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

JavaScript部分：

var btn = document.getElementById("btn");
var text = document.getElementById("text");

btn.onclick = function() {
  if (text.className == "text") {
    text.className = "";
    btn.innerHTML = "收起";
  } else {
    text.className = "text";
    btn.innerHTML = "展开";
  }
}

HTML部分：

<div>
  <span id="text" class="text">
    这里是需要超出两行的文本内容，超出部分会被省略号代替。
  </span>
  <span id="btn" class="expand-btn">展开</span>
</div>

这样，文本超出两行后，会在省略号后面显示一个“展开”按钮。点击按钮后，文本会展开，并将按钮文字改为“收起”。再次点击按钮，文本会收起，并将按钮文字改为“展开”。