如何使按钮在打开其内容时不会掉下来？
要使按钮在打开其内容时不会掉下来，可以通过以下几种方式实现：
- 使用CSS属性overflow：hidden来限制按钮内容的显示范围，超出部分将被隐藏，不会导致按钮掉下来。例如：
.button {
overflow: hidden;
/* 其他样式属性 */
}- 使用CSS属性text-overflow：ellipsis来在按钮内容溢出时显示省略号，而不是掉下来。例如：
.button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 其他样式属性 */
}- 使用JavaScript来动态计算按钮内容的高度，并设置按钮的固定高度。当内容超出按钮高度时，可以通过添加滚动条来显示内容，而不会导致按钮掉下来。例如：
var button = document.querySelector('.button');
var content = document.querySelector('.content');
button.style.height = button.offsetHeight + 'px';
content.style.maxHeight = button.offsetHeight + 'px';
content.style.overflowY = 'scroll';以上是几种常见的解决方案，具体选择哪种方式取决于实际需求和设计风格。对于按钮内容的控制，可以根据具体情况选择合适的方式来实现。
相关·内容
2回答
截断div中的文本
css
我有几个盒子项目，并使用flex对齐它们。
每个长方体都有flex-direction: vertical属性。
但是，正如您所看到的蓝色描述。我想让它们具有相同的高度，并且溢出部分应该显示省略号。
然而，一点运气都没有。文本在div.control > div中
有什么想法吗？
height: 50px !important;
text-overflow: ellipsis;
div.control{
overflow: hidden;
text-overflow: ellipsis;
div{
height:
浏览 0提问于2018-01-11得票数 0
1回答
如何通过div的高度将文本扩展到多行，并在最后添加三个点？
html、css、overflow、ellipsis
我有一个长的文本，我想显示它与他的父母div。我给他身高和宽度。我用
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
但是，只有一条线。
我添加了代码来演示它：
.root {
width: 283px;
font-size: 20px;
height: 283px;
background-color: coral;
}
.text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&
浏览 1提问于2022-02-16得票数 1
5回答
如何在kendo ui网格中显示长单元格值的省略号？
css、kendo-ui、kendo-grid
我试图在剑道网格中显示长值的省略号。根据telerik论坛，我需要在css中设置折叠。
.k-grid td
{
overflow: hidden;
text-overflow: ellipsis;
}
我试图在网格的数据库事件中设置样式，如下所示
var grid = $("#kendoGrid").kendoGrid({
columns: columnConfiguration,
dataBound: function (e) {
$("#kendoGrid td").css("overflow", "
浏览 3提问于2014-07-23得票数 4
回答已采纳
1回答
如何截断按钮文本之间的跨度和所有是在父跨度内？
html、css
我有span在父div中，它的内部有按顺序排列的结构：span, button, span。
我的目标是span适合父div，保持同一行(不换行)，截断span和按钮中的文本，不更改html结构。
下面是代码片段，其中的span及其内容符合父div宽度。问题在于按钮文本，它不会截断。当宽度不够时，按钮就会松开。然而，当它单独存在时，它会像它应该的那样截断。
.box {
border: 3px solid red;
outline: 3px solid rosybrown;
padding: 10px;
display: inline-block;
width
浏览 5提问于2021-07-22得票数 2
回答已采纳
1回答
如何使用按钮逐个截断/收缩跨度，而不是一次全部截断？
html、css、sass
有一个问题，需要一个接一个地收缩span中的元素。因此，根据图像，first完全缩小了span - AfterText，而span - BeforeText和button - Click me!则完全可见。当span-AfterText完全省略时，button - Click me!开始省略(其文本)，并且span - BeforeText仍然完全可见。当button - Click me!完全省略时，span - BeforeText开始省略。 如何实现这一目标？只有css才有可能吗？问题不在于case，在case中我只有span。这个问题是由按钮引起的，它保持在跨度之间，并且不像跨度那样
浏览 19提问于2021-07-23得票数 1
回答已采纳
2回答
“文本溢出:省略”可以在引导3导航栏的“navbar -品牌”文本上工作吗？
css、twitter-bootstrap-3
我希望在引导3导航栏的.navbar-brand文本上使用text-overflow: ellipsis，这样在像iPhone这样的设备上，文本就会被截断，而不是垂直大小增长的导航条。
我还有两个按钮：
<nav class="navbar navbar-default navbar-fixed-top">
<button type="button" class="btn btn-default navbar-btn navbar-left">Back</button>
<a class="
浏览 3提问于2013-10-24得票数 11
2回答
文本溢出省略不适用于多行文本框
html、css
为什么这么难做到：
具有多行文本的固定高度DIV
如果文本对此框太长，请显示“.”在最后
别打断我的话！
下面的显示了一个演示。
问题
我该怎么做“.”也出现在火狐，IE，边缘和Safari？它目前只适用于JSFiddle中的Chrome (参见JSFiddle css)。
我怎样才能确保只有空格被削减，而没有文字？
怎样才能只使用CSS来完成这个任务呢？
示例
第二个方框切割单词abcdefghijk，我希望它在第二个单词之后剪短，然后添加“.”
.truncate {
border-width: 1px;
borde
浏览 6提问于2016-02-01得票数 6
2回答
默认情况下打开Javascript可折叠面板
javascript、html、css
下面的代码示例使用css/html/javascript创建一个可折叠的面板：
function toggleCollapsibleSectionWithAnimation() {
this.classList.toggle("collapsible-active");
var buttonId = this.id;
var sectionId = buttonId.replace("button","section");
var content = document.getElementById(sectionId);
浏览 1提问于2018-09-05得票数 3
回答已采纳
4回答
如何在html输入字段中使用文本溢出省略号？
html、css、ellipsis
我的web页面具有输入字段，我对这些字段应用了以下css：
.ellip {
white-space: nowrap;
width: 200px;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
但这似乎没有任何效果。我是不是遗漏了一些显而易见的东西，或者是否只使用CSS就不能在输入字段中使用省略号？
浏览 0提问于2012-03-19得票数 66
回答已采纳
2回答
如何使溢出隐藏起来工作
css、overflow
我有一些css没有隐藏文本溢出。下面是代码片段中的css：
$html .= '<span style="display: inline-block; overflow-x: hidden; width: 30%">' . $row[2] . '</span>';
$html .= '<span style="display: inline-block; overflow-x: hidden; width: 50%">' . $row[2] . '</span>
浏览 5提问于2014-02-27得票数 0
回答已采纳
2回答
如何通过JS确定我的风格中是否应用了截断？
javascript、css、tooltip、truncation
我正在使用CSS样式应用截断：
.yui-skin-sam td:not(.yui-dt-editable) .yui-dt-liner{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
.yui-skin-sam td[
浏览 1提问于2010-05-29得票数 5
回答已采纳
2回答
可折叠面板对窗口刻度负责
javascript、html、css
我正试图在我的网站上实现一个响应性可折叠面板。我看到W3School在这个问题上有一个例子，但是它有缺陷。如果要在按下按钮以展开/折叠后调整窗口大小，则面板将无法正常缩放。
编辑:这里的截图：
就是他们的例子：
可折叠码
// Button Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click"
浏览 5提问于2019-10-22得票数 1
回答已采纳
5回答
如何使长文本和按钮并排
html、css
我试图修剪我的文本和附近的文本，应该有一个button....but两者必须在一个同一行。这就是我所拥有的：
<div style="width:200px;border:1px solid green">
<div style="white-space:nowrap;overflow: hidden; text-overflow: ellipsis;">sdasdasdasdsadasdasdsadsadsaddsa</div>
<button>aaa</button>
</di
浏览 7提问于2013-10-10得票数 0
回答已采纳
1回答
带有溢出省略号的CSS -旋转文本
html、css、css-transforms、ellipsis
如果文本太长，我需要旋转和截断文本：
但如果我在上面加上省略号：
overflow: hidden;
text-overflow: ellipsis;
旋转的文本将太短：
.box {
position: relative;
width: 300px;
}
.box-header {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
padding: 10
浏览 0提问于2019-07-16得票数 6
回答已采纳
4回答
文本溢出:省略号不适用于表格单元格超链接
javascript、html、css
有没有人可以帮我解决下面的问题。我有一个表格，在一次单元格中有一些超链接。当文本超过单元格宽度时，我想显示3个点。基本上我想每行只显示一个链接，如果在超链接中有一个很长的文本，它不应该溢出到下一行。浏览器: IE
.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
}
.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-
浏览 0提问于2016-10-07得票数 1
2回答
切换php字符限制用于响应媒体查询
php、css、responsive-design、media-queries
我有一个对某些文本块具有php字符限制的响应站点。这个限制取决于它是桌面、平板电脑还是移动设备，但我很难根据设备/大小来切换这个限制。
这是我用来限制文本的php代码：
<?php
ob_start();
the_content();
$old_content = ob_get_clean();
$new_content = strip_tags($old_content);
if(strlen($new_content) > 400) {
echo substr($new_content,0,400) . "...";
浏览 3提问于2013-08-13得票数 0
回答已采纳
2回答
尽量减少显示在离子文本上的文本行
html、css、angular、typescript、ionic-framework
HTML:
<ion-list *ngFor="let message of messages">
<ion-item lines="none" type="button" button="true">
<ion-grid>
<ion-row>
<ion-col class="message">
<ion-text>
浏览 8提问于2020-02-04得票数 0
3回答
单词结束后的CSS省略
css
我在给你发短信。用我当前的css，elipsis通过破坏单词来显示。
为了适当的可读性，我需要在单词完成后显示elipsis。
下面是我的css
.myContainer {
text-overflow: ellipsis;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
padding-bottom: 15px;
}
<div class="myContainer">
Testing the dataset in path oregon location should d
浏览 0提问于2019-07-01得票数 6
回答已采纳
2回答
省略号(三个点)展开和折叠文本
html、css、angular
我想将额外的文本设置为三个点(...)省略号，当我单击这些点时，文本应该会展开和收缩。但使用代码时，文本只会被压缩，而不会在点击点时展开
.overflow{
display:inline-block;
width:180px;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
HTML代码
<div class="overflow" innerHTML="{{ post.review_
浏览 58提问于2019-03-26得票数 2
回答已采纳
3回答
为什么当子元素有“float”时，“text-overflow”不起作用？
css-float、css
我有一段HTML代码，代码如下：
<div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto">
<span style="float: left">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span>
</div>
但ellipsis似乎不起作用。如果我删除了span的flo
浏览 0提问于2012-06-20得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
