当一行文字超过 DIV 或者Table的宽度的时候，浏览器中默认是让它 换行 显示的，如果我们不想让他 换行 显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“…”的做法。 一般的文字截断(适用于内联与块)： ============== CSS ================ 复制代码代码如下: .text-overflow{ display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不 换行 */ white-space:nowrap;/* 不 换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ t

要实现按钮相对于一张图片定位并随 窗口大小 变化 而 变化 ，可以使用 CSS 中的百分比单位。具体步骤如下： 1. 在 HTML 中，使用<img>标签插入图片，并在按钮上使用<button>标签。 2. 在 CSS 中，使用position属性设置图片和按钮的 位置 。使用position: relative;将图片和按钮的 位置 设置为相对定位。 3. 然后使用百分比单位的top、bottom、left或right属性将按钮相对于图片进行定位。例如，如果想让按钮在图片下方，可以使用position: relative;和top: 50%;属性，其中50%表示按钮与图片之间垂直方向上的距离为图片高度的一半。 4. 为了实现随 窗口大小 变化 而 变化 ，需要使用 CSS 中的viewport单位，如vw、vh等。例如，可以使用top: 50vh;表示按钮与图片之间垂直方向上的距离为视口高度的一半。 示例代码如下： HTML : <img src="your-image-url.jpg" alt="your image"> <button>Click me!</button> CSS : img { position: relative; button { position: relative; top: 50vh; /* adjust the distance as needed */ 注意：这种方法仅适用于按钮相对于图片 位置 不变的情况，如果需要实现按钮随图片 位置 变化 而 变化 ，需要使用JavaScript来动态计算按钮的 位置 。