Question

背景：（简化）

<div style="width:300px;" >
    <img src="blabla..." />
    <div style="oveflow:hidden; etc..." >
        description
    </div>
</div>

问题：
有时描述可能会很长并且会被切断（打算查看＆＃34;溢出：隐藏;＆＃34;）。所以我这样做是为了当用户将描述转移到css动画时将描述推到左侧，让我们说＆＃34; margin-left：-200px;＆＃34;。这样，用户可以在显示自身（css动画）时继续阅读描述现在出现了问题：描述可能从很长到很长到很长很长。显然，将它向左推~200px有时是不够的，有时候太多了。

我知道的解决方案：
1）

Javascript/jQuery

我的网站是完整的非js，非常轻量级，我不想使用js。我在网上找到了很多使用js的解决方案，我已经知道了。请尊重这一点。我很想通过纯粹的CSS来解决它。

2）

<marquee>description</marquee>

折旧。

的想法：
我在考虑＆＃34;欺骗＆＃34;它使用PHP代码。例如，我会计算描述的长度，以便我可以设置一个＆＃34; margin-left： - ??? px;＆＃34;因此。现在这对我来说听起来比js更丑，迫使我去＆＃34;硬编码＆＃34;它在PHP文件中绕过了方便的css样式表，导致了一个沉重的php文件。无关紧要。
我没有在CSS3中发现任何关于它的事情，尽管许多其他设计师从我在GG上搜索的内容中遇到了这个问题。是否超出了css语言的范围？
谢谢。

PS：我的描述必须适合 1行。没有换行符，没有滚动条，没有＆＃34;显示更多＆＃34;按钮等

Answer 1

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

p.test {
word-wrap: break-word;
}

这是你要找的吗？

Answer 2

我建议你修复描述div的宽度和高度，并使用css属性overflow-y：auto。

默认滚动条很难看，并且对于所有浏览器都是不同的，所以你可以尝试使用js插件，但正如你所说，你不想只是为了完成一项小任务而添加一个库。:)

Answer 3

试试这个 -

div.test {
        white-space: nowrap; 
        width: 12em; 
        overflow: hidden; 
        height:30px;   
    }
    div.test:hover {
        text-overflow: inherit;
        overflow: visible;
    }

    <p>Hover over the two divs below, to see the entire text.</p>

    <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box. This is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the box</div>
    <br>
    <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

固定宽度div

3 个答案: