通过更改容器的宽度来证明文本
Tom*_*mas 6 javascript text dom width
我希望我的工具提示中的文字是合理的,但不是像在css中那样在文字之间设置大的空格,而是通过调整容器宽度.
例如,这是工具提示
如果有大量文本,我不希望我的工具提示拉伸到1000px,所以我将最大宽度设置为300px.
通过设置最大宽度,我会进入工具提示看起来很完美的情况,如果我稍微加宽容器,在这种情况下为15px.
或者可能有一种情况,我想缩小文本元素以确切适合.
最好的方法是什么？
我能想到的最好的办法是让硬道理,在跨度包装它,测量到边缘的距离,如果是低于50%,扩大或者更多收缩容器中,直到容器的高度的变化,这意味着行了添加或删除
小智 0
获取所需字符串的长度并应用所需的格式。
这是我的想法的一个非常简单的例子。我希望我能详细说明，但你知道，有很多事情要做。希望能帮助到你。
超文本标记语言
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="tooltip">
<p class="msg">Pork belly</p>
</div>
<div class="tooltip">
<p class="msg">Pork belly synth narwhal meggings next level before they sold out Carles mlkshk chia Brooklyn</p>
</div>
<div class="tooltip">
<p class="msg">Wes Anderson literally flannel Godard letterpress. Pinterest Carles artisan, PBR whatever cray cliche sustainable banjo fanny pack occupy Bushwick. +1 cred disrupt, DIY you probably haven't heard of them slow-carb blog authentic Portland </p>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="behavior.js"></script>
</body>
</html>
CSS .container{ 宽度：600px; 保证金：0 自动；}
.tiny{
width: 120px;
background: #369;
}
.medium{
width: 360px;
background: #963;
}
.big{
width: 600px;
background: #693;
}
JS
$(function() {
$.each($('.tooltip'), function(index, val) {
var msgLength = $('.msg',this).html().length;
if (msgLength <= 20) {
$(this).addClass('tiny');
}
else if(msgLength <= 100){
$(this).addClass('medium');
}
else{
$(this).addClass('big');
}
});
});
当然，如果您执行一个在工具提示注入 dom 后立即应用的功能，那就更好了。:)
只是想指明一些方向。
告诉我发生了什么事。
| 归档时间： |
|
| 查看次数： |
575 次 |
| 最近记录： |