剃刀。如何切割信息

我在同一行上有一個帶有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％嗎？

來源

2015-04-17 Снежана Беловицкая

1）你真的需要80％的user.Name嗎？ 2）你可以使用'overflow-x：hidden;'來隱藏內容，所以不會顯示滾動條。你還必須添加'display：block;' –

您正在尋找overflow: hidden。

來源

2015-04-17 18:31:26 SLaks

可以使用display:inline-block爲.left和.right和使用後寬度爲.right 80％.left和20％：使用...

來源

2015-04-17 18:43:32

您可以

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

text-overflow: ellipsis將削減多餘的話使用寬度，溢出，空白和文本溢出屬性來實現內容的優美修剪，以確保它不會破壞您的結構：

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

來源

2015-04-17 18:43:33 Trey

我不會用剃刀實現格式化目標。儘管回答你的問題;您可以創建一個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的方法。

來源

2015-04-20 01:16:27

剃刀。如何切割信息

回答

相關問題