iuap-design
Version:
UI Framework Used For Enterprise.
49 lines • 2.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="http://iuap.yonyou.com/fe/vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="http://iuap.yonyou.com/fe/vendor/uui/css/u.css">
<link rel="stylesheet" type="text/css" href="http://iuap.yonyou.com/fe/vendor/uui/css/u-extend.css">
<link rel="stylesheet" type="text/css" href="http://iuap.yonyou.com/fe/vendor/uui/css/tree.css">
<link rel="stylesheet" type="text/css" href="http://iuap.yonyou.com/fe/vendor/uui/css/grid.css">
<link rel="stylesheet" type="text/css" href="widget.css">
</head>
<body>
<p>文字是否包裹换行</p>
<div class="example example-box u-container-fluid " style="width:500px">
<div class="u-row">
<div class="u-col-md-3">
<div class="text-hide h" style="border:1px solid #e6e8ea;">
我被隐藏了
</div>
</div>
<div class="u-col-md-3">
<div class="text-truncate h" style="border:1px solid #e6e8ea;">
内容显示一行，超出的内容使用“...”代替 This is text truncate.This is text truncate.
</div>
</div>
<div class="u-col-md-3">
<div class="text-break h " style="border:1px solid #e6e8ea;">
This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
</div>
</div>
<div class="u-col-md-3">
<div class="text-nowrap h" style="border:1px solid #e6e8ea;overflow: hidden;">
内容显示一行，不换行 This is text nowrap.This is text nowrap.
</div>
</div>
</div>
</div>
<script src="http://iuap.yonyou.com/fe/vendor/jquery/jquery-1.11.2.js"></script>
<script src="http://iuap.yonyou.com/fe/vendor/knockout/knockout-3.2.0.debug.js"></script>
<script src="http://iuap.yonyou.com/fe/vendor/uui/js/u-polyfill.js"></script>
<script src="http://iuap.yonyou.com/fe/vendor/uui/js/u.js"></script>
<script src="http://iuap.yonyou.com/fe/vendor/uui/js/u-tree.js"></script>
<script src="http://iuap.yonyou.com/fe/vendor/uui/js/u-grid.js"></script>
<script src="http://iuap.yonyou.com/fe/vendor/requirejs/require.debug.js"></script>
<script src="widget.js"></script>
</body>
</html>