css - Razor 。如何剪切消息

Question

我有一个 HTML 文件，同一行有 2 个 DIV 元素。

<div>
     <div class="left"> @user.Message</div>
     <div class="right"> @user.Name</div>
</div>

CSS:

.left{
    width:80%;
    float: left;
 }
.right{
    width: 20%;
    float: right;
 }

如果我将第一个 DIV 中的消息宽度设置为大于 80% 的值，我的结构就会崩溃。

是否可以拆分消息@user.Message，保证消息小于80%？

Answer 1

您可以使用 width、overflow、white-space 和 text-overflow 属性来实现内容的优雅修剪，以确保它不会破坏您的结构:

.wrapper{
    width:600px;
}
.left{
    width:80%;
    float: left;
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
 }
.right{
    width: 20%;
    float: right;
 }

<div class="wrapper">
     <div class="left">this should be a nice long string, over 80% of the total width of the parent, any more should be hidden from view gracefully</div>
     <div class="right">should be 20%</div>
</div>