#Lock Box

这是一个用于单行文本的容器组件，最初的需求源于表格的单元格内容过长引起的表格布局畸形。

用这个组件可以简单优雅地实现定宽，最小宽，最大宽以及自动保护内容不被挤压。

示例：

import LockBox from 'lock-box';

...

render() {
	return (
		<div class="outer">
			<LockBox contents="Hello box!" lock="auto" hint="top" />
			<LockBox contents="I'm looooooooooooooooooooong text..." lock="<300" />
			<LockBox contents="I'm protected .........." lock="100%" />
		</div>
	);
}

API:

| 名称 | 说明 | 类型 | 默认值 | | - | - | - | - | | contents | 要显示的内容 | string | '' | | lock | 锁定策略: (见下面示例)| string | 'auto' | | hint | 提示的位置：top, bottom, cover| string | 'cover' |

附：

// 锁定策略
lock = '[<|>|=]value';
// 分为两部分
// 第一部分为判定条件，值为 `<`, `>`或`=`

// 第二部分限定值，如
'auto', '100%', '100'

// 自动锁定初始值
lock = "auto";

// 保护内容始终被显示（不被换行，不被截断）
lock = "100%";

// 使终显示n%的内容长度（上面功能的副产品，应用场景不明...）
lock = "n%";

// 限定最小宽度
lock = ">120";

// 限定最大宽度
lock = "<120";

// 限定绝对宽度
lock = "120";