标签: overflow

我目前面临着在 ui 引导模式中显示 ui-select 下拉菜单的问题，该模式应用了溢出 css。

目前，当打开 ui-select 下拉列表时，选项列表会在模态中打开，并被overflow-y:scroll;应用于模态主体的样式部分隐藏。

我想找到一种解决方案，使下拉菜单位于模态溢出之外，并且可以与模态的边缘重叠，就像模态没有应用溢出时一样。

以下 plunker 演示了我面临的问题。模式中的溢出切换按钮将在应用/不应用溢出之间切换，以演示问题和所需的结果。

https://plnkr.co/edit/7eZ7GuPFMiEFMT2hogMV?p=preview

overflow-y: scroll在这种情况下，模态体是必需的。模态页眉和页脚必须在页面上可见而无需滚动。将溢出添加到模态主体以仅将滚动应用于此区域，从而允许将信息添加到此区域，而无需增加页面底部下方的模态高度。用户可以动态编辑 modal-body 中显示的数据，这可以向 modal 添加额外的数据行，每行数据都可以包含 ui-select 元素。

我的 Flex 容器奇怪地（在我看来）忽略了max-width和wrap。

其目的是在左侧放置一个（始终）大的项目，并在该项目旁边或下方放置零个、一个、两个或三个较小的项目。如果只有一个，它应该显示在右侧，如果有两个或三个，它们应该全部转到下一行（等距）。

0) -------------------------------
   |         large item          |
   -------------------------------
1) -------------------------------
   |     large item      | small |
   -------------------------------
2) -------------------------------
   |         large item          |
   -------------------------------
   |     small    |    small     |
   -------------------------------
3) -------------------------------
   |         large item          |
   -------------------------------
   |  small  |  small  |  small  |
   -------------------------------

我认为 Flexbox“必须这么做”。但现在它不会按预期换行。右侧的项目（应该位于第二行）刚刚溢出弹性盒。

谁能看到我做错了什么吗？非常感谢！

一个例子在这里：Codepen

0) -------------------------------
   |         large item          |
   -------------------------------
1) -------------------------------
   |     large item      | small |
   -------------------------------
2) -------------------------------
   |         large item          |
   ------------------------------- …

有没有办法使用

text-overflow: ellipsis

想到了Tailwind CSS 框架

我想使用顺风约定，如：

&__title {
    @apply text-overflow-ellipsis;
}

代替

&__title {
    text-overflow: ellipsis;
}

我有这个代码：

<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>

<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>

这导致（注意没有下划线和剪切字符）：

也就是说，它在 Firefox（Windows 10 上的 66.0.3）中的行为方式。其他浏览器似乎呈现下划线。上面的代码片段运行器似乎也可以工作（即使在 Firefox 中），除非您在“完整页面”中运行它。

这个Q类似于添加unicode字符后文本更改高度，只是这里没有技巧。“_”只是一个简单的 ASCII 字符。

我的问题是哪种行为是正确的。是否允许特定字符更改行高（我认为它只应该与字体相关）？不应该line-height: 1暗示它可以完全适合任何文本吗？

我想有些字符是特殊的，例如在其线下方绘制的“p”、“g”、“j”（可能还有“_”）。仍然哪种行为是正确的。是否认为溢出？

PS：此外，我觉得很有趣要么 overflow-x: hidden;overflow-y: visible;和overflow-x: visible;overflow-y: hidden;还是引起了这一点。这对我来说更像是一个实际的错误。

我有一个问题的图像溢出了 17 个像素。&我无法解决它？首先，我做了什么..！！！

我拿了一个Row()小部件并用Container()& 包裹起来，其中Row()包含了两个Expanded()小部件。一个用于 TextField()，另一个用于CountryPickerDropdown()。

我使用过country_pickers插件

代码：

 new Container(
                          width: MediaQuery.of(context).size.width,
                          padding: const EdgeInsets.only(left: 10.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          border: Border.all(color: Colors.blue)
                        ),  
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: CountryPickerDropdown(
                                initialValue: 'in',

                                itemBuilder: _buildDropdownItem,
                                onValuePicked: (Country country) {

                                  isCountryCodeSelected=true;
                                  print("${country.name}");
                                  print("${country.phoneCode}");
                                  print("${country.isoCode}");
                                  print("+${country.phoneCode}(${country.isoCode})");
                                 setState(() {
                                  countryCode= country.phoneCode;
                                });
                                },
                              ),
                            ),
                            Expanded(
                              child: TextField(
                              keyboardType: TextInputType.phone,
                              decoration: InputDecoration(
                                border: InputBorder.none, 
                                hintText: "Telephone Number", 
                              ),

                              onChanged: (value){ …

我有带有子 div 的可滚动 div 。有没有办法显示整个孩子（也在可滚动 div 之外）？现在，overflow-x: scroll就像overflow-x: hidden滚动条一样。我想要overflow-x: visible带有滚动条。这是小提琴。

.container {
  margin: 0 auto;
  overflow-x: scroll;
  width: 300px;
}

.child {
  background-image: linear-gradient(to left, blue, green);
  height: 100px;
  width: 600px;
}

.containerExample {
  background-image: linear-gradient(to left, blue, green);
  margin: 0 auto;
  overflow-x: visible;
  width: 600px;
}

.childExample {
  border: 1px solid red;
  height: 100px;
  margin: 0 auto;
  width: 300px;
}

Now:

<div class="container">
<div class="child">

</div>
</div>

What I want (red …

我的步进器超过 3 个步骤。

步进器工作方向正确Vertical，但是当我Horizontal用溢出FloatingActionButton像素切换时。

import 'package:flutter/material.dart';

class StepperEx extends StatefulWidget {
  @override
  _StepperExState createState() => _StepperExState();
}

class _StepperExState extends State<StepperEx> {
  int _currentStep = 0;
  StepperType stepperType = StepperType.vertical;

  switchStepType() {
    setState(() => stepperType == StepperType.vertical
        ? stepperType = StepperType.horizontal
        : stepperType = StepperType.vertical);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('Stepper Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Stepper(
              //physics: …