Question

我在尝试将溢出截断合并到我的＆＃34;响应＆＃34;中时遇到了问题。网站设计使用视口单元根据视口大小调整div和文本的大小我尝试过使用overflow，text-overflow和jquery.dotdotdot无济于事。我无法使用SO代码块，所以我已粘贴在pastebin上。

HTML（PasteBin link）

<!DOCTYPE html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <title>OBS NP</title>
    <meta content="" name="description">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="apple-touch-icon.png" rel="apple-touch-icon">
    <!--<link rel="stylesheet" href="css/normalize.min.css">-->
    <link href="css/main.css" rel="stylesheet">
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>
    <div class="bg"></div>
        <!--[if lt IE 8]>
           <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->

        <div class="header-container">
            <header class="wrapper">
                <h1 class="title">Now Playing</h1>
            </header>
        </div>

        <div class="main-container">
            <div class="main">
                <span class="AlbumArt"><img alt="Album Art" src="http://userserve-ak.last.fm/serve/300x300/9544097.jpg"></span>


                <header class="SongTitle">
                    <h1>Republic of Dreams</h1>

                    <p>There's No Bullshitting Here</p>
                </header>
            </div><!-- #main -->
        </div><!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <h3>OBS Now Playing, by <a href=
               "https://twitter.com/nicholainissen">@nicholainissen</a></h3>
            </footer>
        </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
    </script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.2/jquery.dotdotdot.min.js"></script>
    <script src="js/main.js"></script>

    <!-- chrome fonts for outdated shit? -->
     <script type="text/javascript">
        $(document).ready(function () {
            $('head').append('<link href="css/chrome.css" rel="stylesheet" />');
            });
    </script>
</body>
</html>

CSS（PasteBin link）

/*@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500&subset=cyrillic,cyrillic-ext,latin,greek-ext,latin-ext);*/
@import url(http://fonts.googleapis.com/css?family=Karla:400,700,700italic,400italic&subset=latin,latin-ext);
/* ===== OBS NP CSS ==================================================

   Author: Nicholai Nissen, using
   HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/

   Warning: 'Expletives might occur, browse this source at your own peril';

   ========================================================================== */

/* ==============================
   Absolutely clean slate
   Ultra Mega Css Reset h4x 666!!
   ============================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    top:0;
    left:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent
}

/* ============================================================================== */

html {
    height:100%;
    width:100%;
    font-size:1vmin;
    color:#FEFEFE;
    line-height:1.4
}

body {
    font-family: 'Karla', sans-serif;
    overflow:hidden;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);    /*
    text-shadow: rgba(0,0,0,0.3) 0 -1px, rgba(0,0,0,0.7) 0 0 10px, rgba(0,0,0,0.3) 0 0 50px;*/
}

img {
    vertical-align:middle;
    height:50vh;
    width:50vh
}

* {
    box-sizing:border-box
}

.bg {
    background-image: url('http://userserve-ak.last.fm/serve/174s/68195184.jpg');
    background-size:cover;
    display:block;
    -webkit-filter:blur(15px);
    -moz-filter:blur(15px);
    -o-filter:blur(15px);
    -ms-filter:blur(15px);
    filter:blur(15px);
    height:800px;
    left:0;
    position:fixed;
    right:0;
    z-index:0;
}

.content {
    background:rgba(255,255,255,0.35);
    border-radius:3px;
    box-shadow:0 1px 5px rgba(0,0,0,0.25);
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
    top:10px;
    left:0;
    position:fixed;
    margin-left:20px;
    margin-right:20px;
    right:0;
    z-index:2;
    padding:0 10px
}

.browserupgrade {
    margin:.2em 0;
    background:#ccc;
    color:#000;
    padding:.2em 0
}

.wrapper {
    width:100vw;
    margin:0 1%
}

/* ===================
    Fuck this theme
   =================== */

.header-container {
    position:absolute;
    color:#fff;
    height:25vh;
    z-index:3;
}

.footer-container {
    position:fixed;
    color:#fff;
    top:85vh;
    height:15vh;
    z-index:3;
}

.main-container {
    top:25vh;
    height:60vh;
    position:absolute;
    z-index:3;
    max-height:60vh;
}

a,a:link,a:visited,a:active,a:hover {
    color:#fff
}

.title {
}

header h1 {
    font-size:23vmin;
    font-weight:700;
    z-index:3;
    text-shadow: 0px 0px 18px rgba(0, 0, 15, 0.53);
    text-overflow:ellipsis
}

header p {
    font-size:20vmin;
    font-weight:400;
    z-index:3;
    text-shadow: 0px 0px 18px rgba(0, 0, 15, 0.53);
    text-overflow:ellipsis
}

footer h3 {
    float:right;
    font-weight:400;
    font-size:8vmin;
    padding-right:5vh;
    vertical-align:text-bottom;
}

.SongTitle {
    float:right;
    width:100vw-50vh;
    overflow:hidden;
}

.AlbumArt {
    float:left;
    padding:5vh
}

.main{
    overflow:hidden;
    text-overflow:ellipsis;
}

这是我第一次使用视口单元时，我之前使用基于CSS的椭圆机取得了有限的成功，但这只会让我疯狂。

Answer 1

评论时，文字需要站在一行，overflow需要设置为hidden才能触发ellipsis效果。

更新CSS的这一部分

header h1 {
font-size:23vmin;
font-weight:700;
z-index:3;
text-shadow: 0px 0px 18px rgba(0, 0, 15, 0.53);
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}

http://jsfiddle.net/5aqphfor/1/

如果white-space未设置为nowrap，则文本将换行/中断超过1行：）

使用Viewport单元的响应式设计中的CSS文本溢出

1 个答案: