小编sky*_*red的帖子

我有一个固定宽度和高度的表格单元格,如果文本太大,单元格大小应该保持不变,文本应该由overflow:hidden隐藏.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

但是,如果添加太多文本,表格单元格将扩展到100px以上.任何阻止它扩展的技巧？

文本长度应为几行,因此"white-space:nowrap"解决方案不适用

在一个也可以在移动设备上查看的网站上工作,需要在touchstart和mousedown上绑定一个动作.

看起来像这样

 $("#roll").bind("mousedown touchstart", function(event){

 someAction();

它在Iphone上工作正常,但在Android上它响应两次.

event.stopPropagation();
event.preventDefault();

添加此代码会修复Android Chrome,但不适用于Android默认浏览器.任何其他技巧可以解决所有Android的问题？

我需要创建一个快捷方式,在光标处添加某些文本,例如{sometext},如何做到这一点？

我使用Smarty生成html模板.我目前使用html突出显示,这是很好的,除了它不突出smarty标签,{foreach} 我尝试安装Smarty包,但这看起来不是很好.

所以基本上我需要能够将大括号中的任何内容添加到标准HTML着色中.如何才能做到这一点？

我正在尝试创建一个图标容器,它将显示任何图像大小(长或宽).

图像应该与容器较小的一侧适合容器,而额外容器将在容器外部.在应用溢出之前:隐藏它应该像这样工作.

它似乎很容易用js,但我很想找到一个CSS解决方案.

<div class="container">
   <img src="test.png"/>
</div>

.container {
   width: 30px;
   height: 30px;
}
.container img {
   position: relative;
   left: 50%;
   top: 50%;
   transform: translateY(-50%) translateX(-50%);
}

我需要在表格单元格的顶角放置一个元素,文本应该在底部堆叠.我使用vertical-align:bottom来移动所有文本,但现在我的top元素有问题,因为table-cell不支持相对定位......任何想法如何才能完成？

<div style = "display: table-cell; vertical-align: bottom">
    <div class = "top"> Top corner</div>
    <h2> some text in the bottom </h2>
    <h3> some more text in the bottom </h3>
</div>

编辑:看起来应该是这样的

+-----------+   +-----------+  +------------+
|top text   |   |top text   |  |top text    |
|           |   |           |  |            |
|some long  |   |           |  |            |
|text       |   |           |  |            |
|more long  |   |           |  |            |
|text       |   |           |  |            |
|end of     |   |           | …

我正在尝试使用flex来创建相同宽度的flex项,但是它们会根据flex项中的子项数不断改变宽度

小提琴

正如您所看到的,正确的绿色容器要小得多,即使两者都具有柔性增长:1

我怎样才能解决这个问题？谢谢!

span {
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}

一个元素被任意放置在页面上,并且需要转换到事件上的固定位置(在我的情况下,屏幕滚动,但我在小提琴中使用悬停)

元素的原始位置以父对象为中心(top:auto和left:auto).在悬停时,它应该平滑地移动到屏幕的角落(左:0,顶部:0),然后回来.相反,它只是跳转到位,忽略了过渡属性.

我意识到没有一个浏览器支持转换到auto,但希望找到一些解决方法.

小提琴

<div>
    <span>test</span>
</div>

div {
    border: 1px solid red;
    text-align: center;
    height: 100px;
    margin: 15px;
}
span {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    transition: all 1s;
    position: fixed;
    left: auto;
    top: auto;
}
div:hover span {
    left: 0;
    top: 0;
}

PS.我希望只修复css,但是使用JQuery的解决方案也可以.

我目前有这个长期规则

#content #wrapper table td:nth-child(3), 
#content #wrapper table td:nth-child(4), 
#content #wrapper table td:nth-child(5) {
     width: 30px;
}

是否可以将第n个孩子组合成更短的东西nth-child(3,4,5)而不是3个单独的线？

有没有办法制作流畅的布局,如果浮动元素不适合,它会移动到下一行的左边？这是我想要实现的目标的图片:

如果绿色元素和右元素都有空间,则红色元素会浮动到右侧.

如果没有足够的空间(绿色元素很长,或者屏幕太小),红色元素应该包裹并将其自身对齐到左侧.

这就是我现在所拥有的:小提琴

如您所见,绿色元素在包装后保持与右侧对齐.

码:

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

.red {
    display: inline-block;
    border-color: red;
}
.green {
    float: right;
    width: 80px;
    border-color: green;
}