overflow 相关问题

所以，我有以下代码：所以，我有以下代码： <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres"> <div className="flex-col ml-4 mt-3 "> <h1 className="text-bgTela font-bold text-2xl tracking-wider">Banco 1</h1> <div className="flex"> <h1 className="text-bgTela font-thin text-base">**** **** **** 1234</h1> <h1 className="text-bgTela font-thin text-base">**** **** **** 1234</h1> <h1 className="text-bgTela font-thin text-base">**** **** **** 1234</h1> </div> <div className="flex justify-between mt-2 mr-4"> <h1 className="text-bgTela text-sm font-medium">Voltar</h1> <div> <input type="radio" name="slider" className="size-2 " checked /> <input type="radio" name="slider" className="size-2 ml-2 mr-2" /> <input type="radio" name="slider" className="size-2 " /> </div> <h1 className="text-amareloIdv text-sm font-medium">Próxima</h1> </div> </div> </div> 它看起来像这样：文本位于它们自己的 div 内，我希望它们水平溢出，这样我就可以制作滑块，但它们正在调整以适应 div。我应该添加或删除什么属性，以便在不损害 div 其余部分的情况下发生？我已经尝试过一些方法，例如向文本的 div 添加“溢出”，但没有成功为了在div上滚动，您必须将宽度设置为固定的较小尺寸，将text-wrap设置为nowrap，将overflow-x设置为滚动。示例代码： .text-base { width: 150px; overflow-x: scroll; text-wrap: nowrap; } <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres"> <div className="flex-col ml-4 mt-3 "> <h1 className="text-bgTela font-bold text-2xl tracking-wider">Banco 1</h1> <div class="flex"> <h1 class="text-bgTela font-thin text-base">**** **** **** 1234</h1> <h1 class="text-bgTela font-thin text-base">**** **** **** 1234</h1> <h1 class="text-bgTela font-thin text-base">**** **** **** 1234</h1> </div> <div className="flex justify-between mt-2 mr-4"> <h1 className="text-bgTela text-sm font-medium">Voltar</h1> <div> <input type="radio" name="slider" className="size-2 " checked /> <input type="radio" name="slider" className="size-2 ml-2 mr-2" /> <input type="radio" name="slider" className="size-2 " /> </div> <h1 className="text-amareloIdv text-sm font-medium">Próxima</h1> </div> </div> </div>

html css reactjs overflow

回答 1 投票 0

在CSS中隐藏在下方而不是顶部的溢出

overflow-y:hidden 将隐藏上半部分和下半部分的视图。我们可以只显示上半部分而不显示下半部分吗？现在我喜欢这样的overflow-y-top:visible;溢出-y-底部：隐藏；

css overflow

回答 6 投票 0

如何让flex增长div隐藏其溢出内容

使用顺风CSS。由于 flex-grow 类，我有一个 div 占用了所有可用空间。它还具有溢出滚动来隐藏其内容。在这个 div 中，我有一个具有 h-full 类的组件。

css angular flexbox tailwind-css overflow

回答 1 投票 0

CSS `overscroll-behavior: contains` 当目标元素不溢出时

我正在寻找一个 CSS 解决方案来实现“overscroll-behavior: contains”的确切行为，但当目标元素没有溢出时。我有一个带有弹出式侧边栏/菜单的页面...

css overflow overscroll

回答 2 投票 0

将 Javascript 的 32 位有符号整数算术模拟为 C（或 Perl） - 一些差异

我正在尝试将简单的 JS 代码转换为 C 和/或 Perl，但我发现在对整数进行算术运算 (+ - * / << >>) 时行为存在差异，并且结果溢出。我...

javascript c perl overflow integer-arithmetic

回答 2 投票 0

如何在不更改变量的情况下使用角度插值绑定自动在 span/div 元素中换行（仅垂直调整大小，添加高度）

我们可以使用下面“跨度解决方案”部分中显示的方法自动增加跨度元素的高度：超文本标记语言跨度解决方案：我们可以使用下面“跨度解决方案”部分中显示的方法自动增加跨度元素的高度： HTML <p> <strong>Solution with span:</strong> <span class="textarea" role="textbox" contenteditable> </span> </p> CSS .textarea { border: 1px solid #ccc; font-family: inherit; font-size: inherit; padding: 1px 6px; display: block; width: 100%; overflow: hidden; resize: both; min-height: 40px; line-height: 20px; } 来源： https://codepen.io/chriscoyier/pen/XWbqpzP0 但是它不适用于 Angular！因为 Angular 绑定的值是稍后加载的，不会考虑溢出。如果将 overflow: hidden 添加到样式中，则该值会直接超出跨度或简单地隐藏。 example.component.html： <p> <span class= "textarea" #FieldNameLabel contenteditable role="textbox"> {{example.value}} </span> </p> css 版本，带有 overflow:hidden 我放resize: vertical是因为我只希望高度随着变量中的字符串长度变得越来越长而增加。 .textarea { display: block; min-width: 17rem; max-width: 75%; min-height: 30px; line-height: 1.8rem; resize: vertical; overflow: hidden; padding-top: 0.8rem; } 如果我删除overflow: hidden;，效果会是这样的，值就超出了范围： .textarea { display: block; min-width: 17rem; max-width: 75%; min-height: 30px; line-height: 1.8rem; resize: vertical; padding-top: 0.8rem; } 那么有人可以帮助我编写一段代码，该代码可以使用 Angular 中从数据源到查看目标绑定（插值）的单向功能，根据变量的字符串长度自动增加 div/span 元素的高度吗？提前非常感谢！由于没有人回答我这个问题，我将给出一种可能的解决方案：使用带有指令的文本区域来控制其调整大小，而不是使用可内容编辑的跨度！指令源代码： import { Directive, HostListener, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[textAreaAutoResize]' }) export class TextareaAutoresizeDirective implements OnInit { @HostListener(':input') onInput() { this.resize(); } constructor(private elementRef: ElementRef) { } resize() { this.elementRef.nativeElement.style.height = 'auto'; this.elementRef.nativeElement.style.height = this.elementRef.nativeElement.scrollHeight + 'px'; } ngOnInit() { if (this.elementRef.nativeElement.scrollHeight) { setTimeout(() => this.resize()); } } } 替换原始文本区域的示例文本区域（内容可编辑范围） <textarea class= "field-name-label" #FieldNameLabel textAreaAutoResize role="textbox">{{example.value}}</textarea> 如果有人有使用普通元素（如（“span”、“div”、“p”等）和“contenteditable”）的解决方案，这些元素能够根据角度绑定变量调整大小，欢迎您在下面发布。

css angular data-binding resize overflow

回答 1 投票 0

flexbox 中的溢出问题

标记和样式 * { 框大小：边框框； } 身体 { 字体系列：无衬线字体；背景：#dedede；内边距：48px； } ＃应用程序 { 显示：柔性；宽度：100%； } .box-1 { 边框：1px...

html css web flexbox overflow

回答 1 投票 0

当内部有绝对元素时指定水平滚动，就会出现垂直滚动

<div style="overflow-x:scroll;"> <div style="position: relative; width:3000px; height:100px; background:green; "> <div style="position: absolute; width:200px; height:200px; background:red; top:10px; left:10px "></div> </div> </div> 结果：我需要如下图所示进行操作（应保留水平滚动，红色块位于所有内容之上，红色块将与绿色块一起水平滚动）：有没有不用 JavaScript 就能做到这一点的方法？可以使用position:fixed并使用javascript通过onscroll事件设置红色块的坐标来完成，但这并不漂亮不太明白问题所在。根据我的理解，你想让红色框与绿色框一起水平滚动。您可以利用position:sticky属性和left:0来保持红色块水平固定，同时允许它垂直滚动。以下是修改 HTML 和 CSS 的方法： <div style="overflow-x: scroll;"> <div style="position: relative; width:3000px; height:100px; background:green; "> <div style="position: sticky; width:200px; height:200px; background:red; top:10px; left:0;"></div> </div> </div> 此设置将使红色块保持水平固定，同时允许绿色和红色块一起水平滚动。

html css scroll overflow absolute

回答 1 投票 0

CSS 修剪表内容

我正在寻找一种使用 CSS 修剪表格单元格中长内容的方法。例如。假设给定的单元格包含太长的内容。调整桌子的宽度以适应这个确实......

css overflow css-tables tablecell

回答 2 投票 0

overflow 相关问题

最新问题