小编mpl*_*jan的帖子

为什么这么难:

• 固定高度DIV,多行文字
• 如果此框的文字太长,请在结尾处显示"..."
• 别切词!

以下JSFiddle显示了一个演示.

问题:

• 如何使"..."也出现在Firefox,IE,Edge和Safari中？它目前仅适用于Chrome浏览器(请参阅.chromecss)在JSFiddle中
• 我怎样才能确保只有空格被剪切但没有文字？
• 如何只用CSS完成？

示例:

• 第二个方框切断了abcdefghijk这个词,我希望它在第二个单词之后剪切,然后添加"..."

.truncate {
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 10px;
  margin-bottom: 10px;
  width: 260px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.truncate.ellipsis {
  height: 50px;
  text-overflow: ellipsis;
}
.truncate.ellipsis.chrome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="truncate">
  No truncating at all, height adjusts to text: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk …

嗨，我想使用spring mvc ajax调用下载XLX文件。以下是我对服务器的ajax调用。

 $.ajax({
    type : 'GET',
    url : 'downloadExcel',
    beforeSend : function() {
        startPreloader();
    },
     complete: function(){
         stopPreloader();
     },
    success : function(response){
        console.log(response);
            var blob = new Blob([response], { type: 'application/vnd.ms-excel' });
            var downloadUrl = URL.createObjectURL(blob);
            var a = document.createElement("a");
            a.href = downloadUrl;
            a.download = "downloadFile.xlsx";
            document.body.appendChild(a);
            a.click();
    }
});

这是我的服务器代码

@RequestMapping(value = "/downloadExcel", method = RequestMethod.GET)
    @ResponseBody
    public List<LicenceType> downloadExcel() {
        return licenceTypeService.findAllLicenceType();
    }

我的代码实际上下载了excel文件，但是在excel表格上它显示为 [Object][Object]

我有一个如下所示的数组，我想进行通配符搜索并检索相应的值。这不会给我带来任何结果，如果有更好的方法可以帮助我。我在我的 nodejs 应用程序中使用了 lodash 实用程序。

var allmCar = [
  {
    "_id": ObjectId("5833527e25bf78ac0f4ca30e"),
    "type": "mCar",
    "value": "ABDC",
    "__v": 0
  },
  {
    "_id": ObjectId("5833527e25bf78ac0f4ca30e"),
    "type": "mCar",
    "value": "XYZ ABD",
    "__v": 0
  },
  {
    "_id": ObjectId("5833527e25bf78ac0f4ca30e"),
    "type": "mCar",
    "value": "FGHJ",
    "__v": 0
  }
]

_.find(allmCar, {
  value: {
    $regex: 'XYZ'
  }
})

我最终使用了 _.includes 如下

_.each(allmCar,function(car){
    if(_.includes('XYZ', car.value)===true)
    return car;
})

我有 2 个对象数组，我必须比较它们，但对象的顺序并不重要。我无法对它们进行排序，因为我没有它们的键名，因为函数必须是通用的。我将拥有的关于数组的唯一信息是两个数组的对象具有相同数量的键并且这些键具有相同的名称。所以 array1 必须包含与 array2 相同的对象。

var array1 = [{"key1":"Banana", "key2":"Yammy"}, {"key1":"Broccoli", "key2":"Ew"}];
var array2 = [{"key1":"Broccoli", "key2":"Ew"}, {"key1":"Banana", "key2":"Yammy"}];

在示例中，array1 必须等于 array2。我尝试使用 chai.eql()方法，但没有用。

也就是说,我希望用户桌面(或者他们打开的任何窗口)通过后台显示(略带不透明度).我在photoshop中做了一个快速模型试图说明我的目标(透明bg).

如果需要的话,我可以使用一些jQuery,但更喜欢保持脚印.我真的不想为了一个奇特的效果而增加大量的开销.

我的HTML是

function showStuff(id) {
  if (document.getElementById(id).style.display === "block") {
    document.getElementById(id).style.display = "none";
  } else {
    document.getElementById(id).style.display = "block";
  }
}

而JavaScript则是

<ul class="side bar tabs">
  <li id="tabs1" onclick="showStuff('tabs-1')">City</li>
  <li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
  <li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>

<div id="tabs-1" style="display : none">
  <p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
  <p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
  <p> sodales.</p>
</div>

当我单击特定选项卡时,其他选项卡的内容应该被隐藏但不隐藏.这是我的所有代码.

我正在使用输入类型=“颜色”。在 Chrome 和网络安全颜色上，我有一个奇怪的行为。颜色选择器上选择的颜色与事件的输出不同，如下所示：

在颜色选择器的第三个选项卡上，将选择更改为web safe colors并选择一种颜色：

jQuery('#color').change(function(e){
  console.log(e.target.value)
  jQuery('#result').val(e.target.value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="color" id="color"/>

<textarea id="result"></textarea>

输出与所选值不同。颜色选择器在 Firefox 上可以正常工作。知道为什么 Chrome 会有这种行为吗？

我指的是“第三个选项卡”：

我有一个数组如下

var sample = [{a:1, b: 1, c:1}, {a:1, b: 1, c:1}, {a:1, b: 1, c:1}];

然后我运行下面的代码,并尝试groupsOfItems[0].sample[0].a = 10, groupsOfItems[0].sample[0].a,groupsOfItems[1].sample[0].a并groupsOfItems[2].sample[0].a获得变更为10.

我该如何防止这种情况？

var sample = [{a:1, b: 1, c:1}, {a:1, b: 1, c:1}, {a:1, b: 1, c:1}];


    var groupsOfItems = [];

    for(let i = 0; i < 10; i++) {
        var item = {};
        item.sample = _.clone(sample);
        groupsOfItems.push(item);
    }



  groupsOfItems[0].sample[0].a = 10
  
  console.log(groupsOfItems[0].sample[0].a,groupsOfItems[1].sample[0].a,groupsOfItems[2].sample[0].a);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

我使用 webpack 使用压缩插件将我的应用程序捆绑到 bundle.gzip。

new CompressionPlugin({
  asset: '[path].gz[query]',
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.html$/,
  threshold: 10240,
  minRatio: 0.8,
}),

然后我有一个快速服务器，它为 web 包捆绑的所有内容提供服务，我将内容编码添加到响应中。

const path = require('path')
const express = require('express')

const app = express()
const server = require('http').createServer(app)

app.get('*.js', (req, res, next) => {
    req.url = `${req.url}.gz`
    res.set('Content-Encoding', 'gzip')
    next()
})

app.use(express.static(path.resolve(__dirname, 'dist')))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'))
})
// eslint-disable-next-line
console.log("Server listening on port 8500")
server.listen(8500)

这在每个浏览器中都很有效，除了 firefox，当我打开控制台时会看到这个。

可能是什么问题我认为问题与内容编码有关

我在一次采访中得到了以下 JavaScript 程序。

const average = xs => {
    let sum = 0;
    for (let num in xs) sum += num;
    return sum / xs.length;
};

const result = average([2, 4, 6]);

console.log(result); // 4

面试官让我解释一下这段代码是如何工作的。我认为平均函数只是将数组中的所有数字相加，然后将总和除以数组的长度。然而，这并不是正确的解释。

上面的代码有一个错误。尽管如此，它会产生正确的答案。你能找到错误并修复它吗？另外，你能解释一下为什么上面的代码即使不正确也会产生正确的答案吗？