gpt4 book ai didi

javascript - 工具提示自动换行问题

转载 作者:行者123 更新时间:2023-11-30 15:54:49 25 4
gpt4 key购买 nike

工具提示是自动换行,文本溢出到换行符。如何解决这个问题,我更喜欢以单行而不是多行显示文本?这里是 JSBin

<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div class="form-group">
<label class="col-xs-2 control-label">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" data-toggle="tooltip" title="Lorem ipsum dolor" data-placement="right"/>
</div>
</div>
</body>
</html>

最佳答案

应用 CSS white-space: nowrap;抑制字符串中的换行符。

.tooltip{
white-space: nowrap;
}

.tooltip {
white-space: nowrap !important;
}
<html>

<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>

<body>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div class="form-group">
<label class="col-xs-2 control-label">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" data-toggle="tooltip" title="Lorem ipsum dolor" data-placement="right" />
</div>
</div>
</body>

</html>

关于javascript - 工具提示自动换行问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38736461/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com