createElement div 里面如何设置overflow

你可以使用 CSS 的 overflow 属性来设置 div 元素的溢出处理方式。例如，设置为 scroll，则会出现滚动条；设置为 hidden，则会隐藏超出部分。以下是一些示例代码：

<div style="overflow: scroll;">内容超出时出现滚动条</div>
<div style="overflow: hidden;">内容超出时被隐藏</div>
<div style="overflow: auto;">内容超出时根据需要出现滚动条</div>

你也可以将这些样式写入 CSS 文件中，并在 HTML 文件中引入该 CSS 文件，以便在多个页面中共享这些样式。

相关问题

我想在一个div里面可以显示图片和视屏，两者只能出现其一，比如我先选择了一张图片，再选视屏的时候就显示视屏，但不会超出我原来div的大小，如何设置

您可以使用 JavaScript 监听用户选择的文件类型，然后根据文件类型的不同，动态插入相应的 HTML 标签。例如，如果用户选择了视频文件，则可以插入一个 video 标签，如果选择了图片，则可以插入一个 img 标签。

在插入标签之前，您可以先设置 div 的宽度和高度，然后通过 CSS 的 overflow 属性来控制内部元素的显示方式。如果您希望在 div 内部显示滚动条，可以将 overflow 属性设置为 auto 或 scroll，如果您不希望显示滚动条，可以将其设置为 hidden。

下面是一个示例代码，您可以根据自己的需求进行修改：

<div id="container" style="width: 500px; height: 500px; overflow: hidden;"></div>

<script>
  const container = document.getElementById('container');
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*, video/*';
  input.onchange = function() {
    const file = this.files[0];
    const type = file.type.split('/')[0];
    if (type === 'image') {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(file);
      img.style.maxWidth = '100%';
      img.onload = function() {
        const ratio = this.width / this.height;
        if (ratio > container.clientWidth / container.clientHeight) {
          this.style.height = '100%';
        } else {
          this.style.width = '100%';
        }
      };
      container.innerHTML = '';
      container.appendChild(img);
    } else if (type === 'video') {
      const video = document.createElement('video');
      video.src = URL.createObjectURL(file);
      video.style.maxWidth = '100%';
      video.style.maxHeight = '100%';
      video.controls = true;
      container.innerHTML = '';
      container.appendChild(video);
    }
  };
  container.appendChild(input);
</script>

这个示例代码监听了 input 元素的 onchange 事件，当用户选择了文件后，会根据文件类型动态插入 img 或 video 元素，并根据元素的宽高比调整元素的大小，确保不会超出 div 的大小。同时，还设置了元素的最大宽高，以避免图片或视频太大而导致页面样式错乱。

一个高度固定的div里面有好几个p标签 当p标签过多超出div的高度时,让超出的元素隐藏,同时让div最底部显示省略号 ,如果没有超出,就不显示省略号 请你给出五种写法

1. 使用CSS3中的text-overflow属性

div {
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. 使用JavaScript计算高度并设置样式

<div id="myDiv">
  <p>...</p>
  <p>...</p>
  <p>...</p>
  ...
</div>

#myDiv {
  height: 100px;
  overflow: hidden;
}

const div = document.getElementById('myDiv');
const p = div.getElementsByTagName('p');

let totalHeight = 0;
for (let i = 0; i < p.length; i++) {
  totalHeight += p[i].offsetHeight;
}

if (totalHeight > div.offsetHeight) {
  div.style.height = div.offsetHeight + 'px';
  div.style.overflow = 'hidden';
  div.style.textOverflow = 'ellipsis';
  div.style.whiteSpace = 'nowrap';
  p[p.length - 1].style.display = 'none';
  const span = document.createElement('span');
  span.innerHTML = '...';
  div.appendChild(span);
}

3. 使用jQuery计算高度并设置样式

<div id="myDiv">
  <p>...</p>
  <p>...</p>
  <p>...</p>
  ...
</div>

#myDiv {
  height: 100px;
  overflow: hidden;
}

const div = $('#myDiv');
const p = div.find('p');

let totalHeight = 0;
p.each(function() {
  totalHeight += $(this).outerHeight(true);
});

if (totalHeight > div.height()) {
  div.css({
    height: div.height(),
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  });
  p.last().hide();
  const span = $('<span>...</span>');
  div.append(span);
}

4. 使用Vue.js计算高度并设置样式

<template>
  <div ref="myDiv">
    <p>...</p>
    <p>...</p>
    <p>...</p>
    ...
  </div>
</template>

<script>
export default {
  mounted() {
    const div = this.$refs.myDiv;
    const p = div.getElementsByTagName('p');

    let totalHeight = 0;
    for (let i = 0; i < p.length; i++) {
      totalHeight += p[i].offsetHeight;
    }

    if (totalHeight > div.offsetHeight) {
      div.style.height = div.offsetHeight + 'px';
      div.style.overflow = 'hidden';
      div.style.textOverflow = 'ellipsis';
      div.style.whiteSpace = 'nowrap';
      p[p.length - 1].style.display = 'none';
      const span = document.createElement('span');
      span.innerHTML = '...';
      div.appendChild(span);
    }
  }
}
</script>

5. 使用React计算高度并设置样式

import React, { useEffect, useRef } from 'react';

export default function MyComponent() {
  const divRef = useRef(null);

  useEffect(() => {
    const div = divRef.current;
    const p = div.getElementsByTagName('p');

    let totalHeight = 0;
    for (let i = 0; i < p.length; i++) {
      totalHeight += p[i].offsetHeight;
    }

    if (totalHeight > div.offsetHeight) {
      div.style.height = div.offsetHeight + 'px';
      div.style.overflow = 'hidden';
      div.style.textOverflow = 'ellipsis';
      div.style.whiteSpace = 'nowrap';
      p[p.length - 1].style.display = 'none';
      const span = document.createElement('span');
      span.innerHTML = '...';
      div.appendChild(span);
    }
  }, []);

  return (
    <div ref={divRef}>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      ...
    </div>
  );
}