主页 / 问题 / 1059028
Accepted
DmitryDevelop
Asked:2020-12-16 00:20:26 +0000 UTC2020-12-16 00:20:26 +0000 UTC

帮助防止 <p> 越界并将 ... 置于退出 (html,css)

  • 772

在此处输入图像描述 在此处输入图像描述

在此处输入图像描述

在这里输入一个丑陋的图像描述行，请不要注意。如您所见，如果文本过多，则会超出框架。有必要他只是放......然后切断。它是块中的 p 标签。所有底部的“你：大量文本......”文本都是块边框。通过溢出：隐藏与边界，它只是作物。你必须把... 我尝试按字符数进行修剪，如果消息中有换行符则不起作用

html

1 个回答

  1. Best Answer

    body {
  margin: 0;
  display: flex;
  min-height: 100vh;
}

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto 0;
}
    <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur tincidunt mollis. Aliquam ullamcorper mi ullamcorper risus eleifend, sit amet mattis augue consequat. Quisque nec urna vestibulum, facilisis felis id, auctor lacus. Cras sodales
  sit amet sem convallis lobortis. Curabitur gravida neque orci, et tempor dolor sagittis a. Pellentesque maximus volutpat luctus. Nulla ullamcorper, magna vel scelerisque tincidunt, dui ligula sollicitudin tellus, vitae iaculis purus urna a libero. Nunc
  ut tempor neque, in mattis lorem. Curabitur in pulvinar lorem. Aliquam vehicula metus vel enim vehicula molestie.
</p>

    • 1

相关问题