小编mis*_*Sam的帖子

我有一个表格单元格,我总是希望它是一个特定的宽度.但是,它不适用于大字符串的非空格文本.这是一个测试用例:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

如何在框的边缘切除文本,而不是让框展开？

我一直在试着像垂直方向那样在文字表格中进行,但到目前为止我只能做到这一点 ......我不满意因为它是一个旋转的盒子...... Isn'有没有办法让实际的垂直方向文字？

我只在演示中将旋转设置为305度,这不会使文本垂直.270deg但我只是制作演示以显示旋转.

客户想要两个彩色边框来进行浮雕外观.我可以在一个元素上执行此操作吗？我希望避免使用单独的边框堆叠两个DOM元素.

我在容器内有两个元素,它们通过使用弹性盒并排放置.在第二个元素(.flexbox-2)上,我在CSS中设置它的高度.但是,第一个元素(.flexbox-1)将匹配高度.flexbox-2.我如何停止.flexbox-1匹配高度.flexbox-2,而只是保持其自然高度？

这是我到目前为止(也可用作jsFiddle)

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

我想了解__CODE__选择器如何处理属性冲突,如何选择属性而不是另一个属性？

div {
  background-color: red;
}

div.my_class {
  background-color: black;
}

div#my_id {
  background-color: blue;
}

body div {
  background-color: green;
}

body>div {
  background-color: orange;
}

body>div#my_id {
  background-color: pink;
}

对于某人来说,这可能是显而易见的,但不适合我!

是否存在一些指南或链接,我可以最终了解选择器优先级如何工作？

我需要覆盖包含HTML 5视频的div的div ON TOP.在下面的示例中,重叠的div的id是"video_overlays".见下面的例子:

<div id="video_box">
  <div id="video_overlays"></div>
  <div>
    <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
  </div>
</div>

我有一个很大的文件名,我正在使用CSS文本溢出:省略号.

<style>
   #fileName {
      width: 100px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
</style>
<div id="fileName"> This is the big name of my file.txt</div>

所以我有这个输出

这是双...

但我想保留文件扩展名并有类似的东西

这是... le.txt

是否只能使用CSS？

由于我的文件总是txt,我试图使用text-overflow: string,但看起来它只适用于Firefox:

 text-overflow: '*.txt';

我试图使div具有如下图所示的边框:

这是我尝试过的:

div {
    height: 100px;
    width: 100px;
    border-bottom-right-radius:100px 10px;
    border:1px solid #000;
}

<div></div>

实现这一目标的有效方法是什么？

在下面的示例中,右侧单元格顶部有一个边框.它只出现在Chrome中,是Chrome出错吗？

HTML/CSS

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td>right</td>
  </tr>
</table>

这是一个小提琴的例子.

Chrome屏幕截图

虽然我正在摆弄这个'花式3D按钮'的例子,但我发现它width似乎是硬编码的,以适应文本的宽度.

这是HTML/CSS:

body {
  background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, …