Question

我在同一行有一个包含2个DIV元素的HTML文件。

<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>

Answer 2

您正在寻找overflow: hidden。

Answer 3

您可以将display:inline-block用于.left和.right，之后使用.left的宽度为80％，.right的宽度为20％：

.left{
display: inline-block;
width: 80%;
text-overflow: ellipsis;
}

text-overflow: ellipsis将使用...

删除多余的字词

Answer 4

我不会使用razor来实现格式化目标。尽管如此，回答你的问题;你可以创建一个custom extension。按照该链接的说明，您可以执行以下操作：

helper TrimmedContainer(string content) {
  <div class="left" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
      @content
  </div>
}

@MyHelpers.TrimmedContainer(@user.Message)

我再也不这样做了。我会按照创建具有上述样式的类并将该类添加到div的方法。

剃刀。如何剪切消息

4 个答案: